为什么我的HeatMap不能正确显示?
状况IMAGE:为什么我的HeatMap不能正确显示?
状况:
我的热图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>
到目前为止的问题是:
-
你的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
下面是你的建议和一些修改后的codepen的最新状态:https://codepen.io/anon/pen/zwoVBQ这是我想要实现的:https://codepen.io/freeCodeCamp/full/ aNLYPp/ – Coder1000
如果我用正确的颜色替换当前颜色方案,结果是:https:// codepen。io/anon/pen/WjRePE出于某种原因,结果是非常不同的,我试图找出如何不看答案。 – Coder1000
请,如果你有*另一个*问题,发布*另一个*问题。除此之外,承认人们试图帮助你。如果你不这样做,人们会停止帮助。这就是说,这里是你的代码与正确的色阶:https://codepen.io/anon/pen/OmWWdv –
在这里你去: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你如何设置它。我只是摆弄它,直到我得到要显示的图表,您可以从这里调试它。
只是一个提示:你应该每个月有262个矩形。 –
我认为这个问题是'svg.selectAll(“月”)'因为它没有任何选择。你想在那里选择什么? –