D3 熱圖語法
[英]D3 Heatmap Syntax
問題描述
所以，我的任務是幫助在 web 環境中實現一些視覺效果。 具體來說，我正在嘗試從一個簡單的虛擬矩陣構建一個熱量 map，該虛擬矩陣表示來自 JSON 文件的小數據集，使用 JS 中的 d3。 輸入數據是這樣的：
{"data":[[8,2],[5,4],[9,6]]}
那么，再次，您將如何使用 d3 在熱 map 矩陣中可視化上述數據？
1 個解決方案
解決方案1
0 已采納 2021-03-19 17:54:32
抱歉耽擱了。
希望下面的代碼有幫助..
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
const data = {"data":[[8,2],[5,4],[9,6]]};
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Labels of row and columns
var rows = [];
var cols = [];
var chartData = [];
data.data.forEach((item, i) => {
if( i === 0) {
item.forEach((itm , j) => {
cols.push("col" + j);
chartData.push({ row: "row" + i, col: "col" + j,value: itm});
});
} else {
item.forEach((itm , j) => {
chartData.push({ row: "row" + i, col: "col" + j, value: itm});
});
}
rows.unshift("row" + i);
})
// Build X scales and axis:
var x = d3.scaleBand()
.range([ 0, width ])
.domain(cols)
.padding(0.01);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// Build X scales and axis:
var y = d3.scaleBand()
.range([ height, 0 ])
.domain(rows)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
// Build color scale
var myColor = d3.scaleLinear()
.range(["white", "#69b3a2"])
.domain([1,100])
console.log(chartData);
//Read the data
svg.selectAll()
.data(chartData, function(d) {return d.row+':'+d.col;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.col) })
.attr("y", function(d) { return y(d.row) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
</script>
運行示例..工作示例鏈接
d3熱圖中的寬度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.