[英]Why is the color distribution different on my D3 Heatmap?
題:
為什么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>
與您嘗試復制的dataviz不同,您的colorScale
函數從0變為最大值:
const colorScale = d3.scaleQuantile()
.domain([0, d3.max(tempData, (d) => d.variance + baseTemperature)])
.range(colors);
取而代之的是,使用與要復制的dataviz相同的數學運算,並設置最小值:
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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.