问题:
为什么我的 D3 热图上的颜色分布与引用热图上的颜色分布不同?
数据一样,不知道哪里出错了。
我一定是错误地指定了数据范围吗?
代码:
<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: 70
}
const w = 1250 - margin.left - margin.right;
const h = 500 - margin.top - margin.bottom;
const barWidth = Math.ceil(w / tempData.length);
const colors = ["#5e4fa2", "#3288bd", "#66c2a5", "#abdda4", "#e6f598", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d53e4f", "#9e0142"];
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([margin.left, 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(0," + (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, d3.max(tempData, (d) => d.variance + baseTemperature )])
.range(colors);
var heatMap = svg.selectAll("month")
.data(tempData, (d) => d);
heatMap.append("title");
var rects = heatMap.enter()
.append("rect")
.attr("x", (d) => xScale(new Date(d.year,1,1,0,0)))
.attr("y", (d) => d.month * h/12 - margin.bottom + margin.top -1)
.attr("width", barWidth + 3)
.attr("height", h/12 - 2)
.style("fill", colors[0]);
rects.transition().duration(1000)
.style("fill", (d) => colorScale(d.variance + baseTemperature));
heatMap.select("title").text((d) => d.value );
// 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>
最佳答案
与您尝试重现的数据可视化不同,您的 colorScale
函数是从 0 到最大值:
const colorScale = d3.scaleQuantile()
.domain([0, d3.max(tempData, (d) => d.variance + baseTemperature)])
.range(colors);
取而代之的是,使用与要重现的数据可视化相同的数学方法,设置最小值:
const colorScale = d3.scaleQuantile()
.domain([d3.min(tempData, (d) => d.variance + baseTemperature),
d3.max(tempData, (d) => d.variance + baseTemperature)
])
.range(colors);
这是您更新后的 CodePen:https://codepen.io/anon/pen/YVNvPJ?editors=1010
关于javascript - 为什么我的 D3 热图上的颜色分布不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43656494/