为什么我的HeatMap无法正确显示?

本文介绍了为什么我的HeatMap无法正确显示?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

情况图像:

情况:

我的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("raw.githubusercontent/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>

推荐答案

到目前为止的问题:

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

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: codepen.io/anon/pen/mmONrK?editors = 1000

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