Question

状况图片

状况：

我的heatMap D3.js图表没有正确显示。

我做错了什么？

控制台中有0个错误。

我无法找到错误。它很可能隐藏在明显的视线之内。

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

到目前为止的问题：

您的xScale范围错误，应该是：
```
 .range([margin.left, w]); 
```
您正在对x轴的x位置进行硬编码;
你的矩形'y位置有一个错误的幻数;

您必须使用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)

请注意，这可能不准确（也就是说，正确的数据可能与正确的年份不一致），因为我不确定如何设置它。我只是摆弄它，直到我显示图表，你可以从这里调试它。

为什么我的HeatMap没有正确显示？

2 个答案: