为什么我的HeatMap无法正确显示? [英] Why is my HeatMap not showing up correctly?

问题描述

情况图像:

情况:

我的heatMap D3.js图形无法正确显示.

My heatMap D3.js graph does not show up correctly.

我做错了什么?

控制台中有0个错误.

我找不到错误.这很可能是隐藏在视线中的东西.

I can't find the bug. It's most probably something hidden in plain sight.

代码:

            <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>

推荐答案

到目前为止的问题:

1. 您的xScale范围错误，应该是:

1. Your xScale range is wrong, it should be:

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

您正在对x轴的x位置进行硬编码；

You are hardcoding the x position of the x axis;

您的矩形的y位置的幻数错误；

Your rectangles' y position have a wrong magic number;

您必须使用xScale定位矩形:

You have to use the xScale for positioning your rectangles:

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

尽管最好的方法是创建一个解析器，将d.year转换为日期.

Although the best idea here is creating a parser to convert d.year to a date.

此外，我正在将矩形的宽度从1px增加到2px.

Also, I'm increasing the width of the rectangles, from 1px to 2px.

这是您更新的CodePen: https://codepen.io/anon/pen/mmONrK?editors = 1000

Here is your updated CodePen: https://codepen.io/anon/pen/mmONrK?editors=1000

这篇关于为什么我的HeatMap无法正确显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！