爲什麼我的HeatMap不能正確顯示？

Question

狀況IMAGE：

---

狀況：

我的熱圖D3.js圖不正確顯示。

我做錯了什麼？

控制檯中有0個錯誤。我找不到這個bug。這很可能是隱藏在視野之內的東西。

---

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轉換爲日期。

另外，我正在增加矩形的寬度，從1px到2px。

這是你更新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你如何設置它。我只是擺弄它，直到我得到要顯示的圖表，您可以從這裏調試它。