D3.js Heatmap: Wie man von einem verschachtelten json liest und eine Heatmap mit D3 erstellt

Question

Ich habe seit ein paar Tagen versucht, eine JSON-Datei mit Daten zu lesen und daraus eine Heatmap zu generieren. Der JSON enthält die Häufigkeit von Git Commits am Tag, für jede Woche für 52 Wochen. Die Daten in der JSON (Häufigkeit jeden Tag) ist verschachtelt daher weiß ich nicht, wie man die Daten extrahiert und den Code erhält, um es zu repräsentieren. Ich bin wirklich neu und ich verstehe nicht, was ich vermisse oder was ich falsch mache. Würde mich wirklich freuen, wenn mir jemand helfen kann. Ich lese mehrere Links, aber keiner von ihnen handelt von JSON und ich habe auch Probleme, es zu verstehen. Ich möchte 52 Zeilen erstellen, die eine Woche und 7 Spalten für jeden Tag der Woche darstellen, die ich bereits habe. Die Rechtecke spiegeln nicht die Frequenz wider. Ich bin mir nicht sicher, wie ich das machen soll. Eine Probe der Daten ich habe, und der Code, den ich bisher getan haben, ist als solche:

Code:

<script type='text/javascript' src='http://d3js.org/d3.v4.min.js'></script> 
    <script> 
     var url = "data/git-commit-frequency.json" 
     var color = ["#ffffd9","#c7e9b4","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"] 

     d3.json(url, function (data) { 
      let gridSize = 50; 
      let width = (gridSize + 1) * 7; 
      let height = (gridSize + 1) * data.length; 

      // define range!!! 
      var x = d3.scaleLinear() 
      .domain([0, 7]) 
      .range([0, width]); 

      //52 weeks 
      var y = d3.scaleLinear() 
      .domain([0, data.length]) 
      .rangeRound([height, 0]); 

      let svg = d3.select("body").append("svg") 
      .attr("width", width) 
      .attr("height", height) 

      // Generate rows for each json object 
      var rows = svg.selectAll('.row') 
      .data(data) 
      .enter() 
      .append('g') 
      .attr("transform", function(d, i){ 
       return "translate(0," + y(i) + ")" 
      }) 

      // Generate rects for the array of days per object 
      let box = rows.selectAll("rect") 
      .data(function(d){ return d.days }) 
       .enter() 
       .append("rect") 
       .attr("x", function(d, i) { return x(i); }) 
       .attr("width", gridSize) 
       .attr("height", gridSize) 
       .style("fill", 'black') 
       .attr("class", "bordered"); 
      }) 
    </script> 
</body> 

JSON:

[ 
     { 
     "days": [ 
      0, 
      0, 
      0, 
      0, 
      0, 
      1, 
      0 
     ], 
     "total": 1, 
     "week": 1457827200 
     } 
    ] 

I 52 solcher JSON-Objekte haben in die Datei.

Answer 1

Der Code legt Werte auf die Rects mit diesem Stück Code, und speziell die .data(function(d){ return d.days })

let box = rows.selectAll("rect") 
      .data(function(d){ return d.days }) 
       .enter() 
       .append("rect") 
       .attr("x", function(d, i) { return x(i); }) 
       .attr("width", gridSize) 
       .attr("height", gridSize) 
       .style("fill", 'black') 
       .attr("class", "bordered"); 
      }) 

Jede beigefügten rect einer der Werte aus dem Array Tagen haben (zB 0 oder 1).

Sie können diese (rechts im Browser-Konsole überprüfen auf der rect klicken, wählen und auf Eigenschaften> Rect gehen Inspizieren>Daten und Sie werden sehen, welche Werte auf dieses Element angehängt wurden.

Von dort , können Sie in der Regel auf den Wert mit einer anonymen Funktion innerhalb der Einstellung der Stil oder attr Ihrer rect. Zum Beispiel, um Farbe:

. Stil ("fill", Funktion (d) {return d === 0 ? "grau": "schwarz";})

, die rects mit Wert 0 zu grau und anyt setzt Hing sonst schwarz. Auch wenn Sie komplexere Zuordnungen erhalten, wird die Verwendung der d3-Skala wertvoll.