Warum wird meine HeatMap nicht richtig angezeigt?

Question

LAGE BILD:

---

LAGE:

Mein Heatmap D3.js Graph richtig dargestellt wird nicht.

Was habe ich falsch gemacht?

In der Konsole sind 0 Fehler aufgetreten.

Ich kann den Fehler nicht finden. Es ist höchstwahrscheinlich etwas in Sichtweite verborgen.

---

Code:

  <script type="text/javascript"> 
    d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json", function(error, json) { 
     if (error) { 
      return console.warn(error); 
     } 
     visualizeThe(json); 
    }); 

    function visualizeThe(data) { 

     const baseTemperature = data.baseTemperature; 
     const tempData = data.monthlyVariance; 

     const margin = { 
      top: 10, 
      right: 85, 
      bottom: 45, 
      left: 0 
     } 

     const w = 1100 - margin.left - margin.right; 
     const h = 500 - margin.top - margin.bottom; 
     const barWidth = Math.ceil(w/tempData.length); 

     const colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]; 
     const buckets = colors.length; 
     const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 

     const minTime = d3.min(tempData, (d) => new Date(d.year,1,1,0,0)); 
     const maxTime = d3.max(tempData, (d) => new Date(d.year,1,1,0,0)); 

     const xScale = d3.scaleTime() 
      .domain([minTime, maxTime])  
      .range([0, w]); 

     const xAxis = d3.axisBottom(xScale).ticks(20); 

     const svg = d3.select("#results") 
      .append("svg") 
      .attr("width", w + margin.left + margin.right) 
      .attr("height", h + margin.top + margin.bottom); 

     const div = d3.select("body") 
      .append("div") 
      .attr("class", "tooltip")    
      .style("opacity", 0); 

     svg.append("g") 
      .attr("transform", "translate(70," + (h+margin.top) + ")") 
      .call(xAxis); 

     const monthsLabels = svg.selectAll("monthLabel") 
      .data(months) 
      .enter() 
      .append("text") 
      .text((d) => d) 
      .attr("x", 100) 
      .attr("y", (d,i) => i * h/12 + 30) 
      .style("text-anchor", "end") 
      .attr("transform", "translate(-40," +0+ ")") 
      .style("font-size", 10); 

     const colorScale = d3.scaleQuantile() 
      .domain([0, buckets - 1, d3.max(tempData, (d) => d.variance + baseTemperature)]) 
      .range(colors); 

     const heatMap = svg.selectAll("month") 
      .data(tempData, (d) => d) 
      .enter() 
      .append("rect") 
      .attr("x", (d,i) => i * barWidth + 60) 
      .attr("y", (d) => d.month * h/12 - 440) 
      .attr("width", barWidth) 
      .attr("height", h/12) 
      .style("fill", colors[0]); 

     heatMap.transition() 
      .duration(1000) 
      .style("fill", (d) => colorScale(d.variance + baseTemperature)); 


//   heatMap.exit().remove(); 



     svg.append("text")    
      .attr("transform", 
       "translate(" + (w/2) + " ," + 
       (h+ margin.top + 45) + ")") 
      .style("text-anchor", "middle") 
      .text("Years"); 

     svg.append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", -5) 
      .attr("x",0 - (h/2)) 
      .attr("dy", "1em") 
      .style("text-anchor", "middle") 
      .text("Months");  
    } 

</script> 

Answer 1

Die Probleme bisher:

1. Ihr xScale Bereich falsch ist, sollte es sein:

   .range([margin.left, w]); 
   

2. Du hartzucodieren die x-Position der x-Achse;

3. Die y-Position Ihrer Rechtecke hat eine falsche magische Zahl;

4. Sie haben die xScale zu verwenden, für die Rechtecke zu positionieren:

   .attr("x", (d) => xScale(new Date(d.year,1,1,0,0))) 
   

Obwohl die beste Idee, hier einen Parser zu schaffen d.year auf ein Datum zu konvertieren.

Außerdem vergrößere ich die Breite der Rechtecke von 1px zu 2px.

Hier ist die aktualisierte CodePen: https://codepen.io/anon/pen/mmONrK?editors=1000

Answer 2

Hier gehen Sie: https://codepen.io/anon/pen/qmqeWR

Die Linien I geändert:

.attr("x", (d,i) => (i-d.month) * barWidth + 70) 
.attr("y", (d) => (d.month * h/12 -30)) 
.attr("width", barWidth*12) 

Beachten Sie, dass dies nicht genau sein kann (das heißt, die korrekten Daten stimmen möglicherweise nicht mit dem richtigen Jahr überein), da ich nicht s bin wie du alles aufstellst. Ich habe nur damit herumgespielt, bis ich das Diagramm zum Anzeigen hatte, Sie können es von hier aus debuggen.