为什么我的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你如何设置它。我只是摆弄它，直到我得到要显示的图表，您可以从这里调试它。