ヒートマップが正しく表示されないのはなぜですか？

Question

状況画像：

---

SITUATION：

マイヒートマップD3.jsグラフが正しく表示されません。

どうしたのですか？

コンソールにエラーがありません。

私はバグを見つけることができません。それは、おそらく明白な場所に隠されているものです。

---

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

これまで問題：

1. あなたのXScale範囲が間違っている、それは次のようになります。

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

2. あなたはx軸のx位置をハードコーディングされています。

3. あなたの四角形のyの位置に間違った魔法の数字があります。

4. はあなたの四角形を配置するためのxScaleはを使用する必要があります。

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

最高のアイデアがここに日付にd.yearを変換するパーサを作成しているが。

また、長方形の幅を1ピクセルから2ピクセルに拡大しています。ここで

は、あなたの更新CodePenです：https://codepen.io/anon/pen/mmONrK?editors=1000

Answer 2

ここに行く：私は変更https://codepen.io/anon/pen/qmqeWR

行：これは正確ではないかもしれないこと

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

は注意を（つまり、正しいデータは正しい年と整列しないかもしれません）、私はsではないからですどのようにすべての設定を確認してください。私はグラフを表示するまでそれを試しただけで、ここからデバッグすることができます。