我想創建一個熱圖，它根據一個變數在所有組但不是所有變數的值顯示熱量/顏色。目前我有以下內容，其中顏色基于地圖中所有值的值：
這就是為什么幾乎所有東西都是黃色的，因為盧森堡的家庭凈財富太高了。我的矩形代碼如下：
// Color Scale
var myColor = d3.scaleSequential()
.interpolator(d3.interpolateViridis)
.domain([d3.max(data, d=>d.value),d3.min(data, d=>d.value)]);
// add the squares
svg.selectAll()
.data(data, function (d) { return d.Country ':' d.variable; })
.enter()
.append("rect")
.attr("x", function (d) { return x(d.Country) })
.attr("y", function (d) { return y(d.variable) })
.attr("rx", 4)
.attr("ry", 4)
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", function (d) { return myColor(d.value) })
.style("stroke-width", 4)
.style("stroke", "none")
.style("opacity", 0.8)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
}
我的資料是這樣的長格式：
| 國家 | 多變的 | 價值 |
|---|---|---|
| 澳大利亞 | 變數 1 | 值 1 |
| 澳大利亞 | 變數 2 | 價值 2 |
| ... | ... | ... |
| 澳大利亞 | 變種 24 | 價值 24 |
| 奧地利 | 變數 1 | 價值 25 |
| ... | ... | ... |
| 南非 | 變種 24 | 價值 960 |
您對如何更改此設定有任何想法嗎？我還可以轉換資料。
非常感謝您的幫助，祝您周二愉快！
uj5u.com熱心網友回復：
我通過添加兩列更改了我提供給前端的資料：一列是關于所有組/國家的變數最小值，另一列是關于所有組/國家的變數最大值。我的資料集現在看起來如下：
| 國家 | 多變的 | 價值 | 分鐘 | 最大限度 |
|---|---|---|---|---|
| 澳大利亞 | 變數 1 | 值 1 | 最小值(Var1) | 最大值(Var1) |
| 澳大利亞 | 變數 2 | 價值 2 | 最小值(Var2) | 最大值(Var2) |
| ... | ... | ... | ... | ... |
| 澳大利亞 | 變種 24 | 價值 24 | 最小值(Var24) | 最大值(Var24) |
| 奧地利 | 變數 1 | 價值 25 | 最小值(Var1) | 最大值(Var1) |
| ... | ... | ... | ... | ... |
| 南非 | 變種 24 | 價值 960 | 最小值(Var24) | 最大值(Var24) |
通過包含一個基于當前變數最小值和最大值為我提供顏色變數的函式，我將代碼更改為以下內容：
//Color scale function
function colorPerVariable(minimun, maximum, value) {
var myColor = d3.scaleSequential()
.interpolator(d3.interpolateViridis)
.domain([minimum, maximum]);
return myColor(value);
}
// add the squares
svg.selectAll()
.data(data, function (d) { return d.Country ':' d.variable; })
.enter()
.append("rect")
.attr("x", function (d) { return x(d.Country) })
.attr("y", function (d) { return y(d.variable) })
.attr("rx", 4)
.attr("ry", 4)
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
//Changed part
.style("fill", function (d) { return colorPerVariable(minimum = d.min, maximum = d.max, value = d.value) })
//
.style("stroke-width", 4)
.style("stroke", "none")
.style("opacity", 0.8)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/469549.html
標籤：javascript d3.js 颜色 数据可视化 热图