使用嵌套json數據的d3熱圖：如何創建網格
[英]d3 heatmap using nested json data: how to create grids
問題描述
在此引用此示例： http : //bl.ocks.org/tjdecke/5558084
我想創建一個包含52行和7列的熱圖。 52行代表一年的52周，而7列代表一周的7天。
使用這樣的數據集：（在下面發布縮寫版本）。 “天”表示一周中的7天，其中的數字表示一天中的活動數量。 “總數”表示一周中的活動總數。 “星期”似乎是一種時間戳。
但是，我很難弄清楚如何創建網格，因為示例數據集使用具有7個值的d.day和具有24個值的d.hour來創建網格。 具體來說，我應該如何處理days數組？
我不確定如何處理json值，以及如何定義變量以使用此數據集。
[ { "days": [ 0, 0, 0, 0, 0, 1, 0 ], "total": 1, "week": 1457827200 }, { "days": [ 0, 0, 0, 1, 0, 3, 1 ], "total": 5, "week": 1458432000 }, { "days": [ 1, 0, 0, 1, 5, 0, 1 ], "total": 8, "week": 1459036800 }, { "days": [ 0, 0, 0, 2, 0, 1, 1 ], "total": 4, "week": 1459641600 }, { "days": [ 0, 1, 3, 0, 2, 0, 0 ], "total": 6, "week": 1460246400 }, { "days": [ 0, 1, 1, 2, 2, 0, 0 ], "total": 6, "week": 1460851200 }, { "days": [ 1, 0, 3, 0, 2, 1, 0 ], "total": 7, "week": 1461456000 }, { "days": [ 0, 0, 0, 0, 0, 0, 0 ], "total": 0, "week": 1462060800 } ]
d3.json("/data/frequency.json", function (error, data) { // NOT SURE, PROBABLY WRONG data.forEach(function(d) { ddays = +d.days; total = +d.total; week = +d.week; }); // define range!!! var x = d3.scaleLinear().domain([0, data.length]).range([0, width]); //52 weeks var y = d3.scaleLinear() .domain([0, 52]) .rangeRound([height, 0]); // Generate rectangle for each json object var rectangles = svg.selectAll('rect') .data(data) .enter() .append('rect') .attr("x", function(d, index) { return x(index); }) //WRONG!! .attr("y", function(d, index) { return y; }) // WRONG!! .attr("width", gridSize) .attr("height", gridSize) .style("fill", 'black') .attr("class", "bordered");
1 個解決方案
解決方案1
1 已采納 2017-10-24 23:59:02
使用嵌套的數據，您可以首先為每個對象附加組元素，以每周在網格中創建一個“行”，然后根據它們的索引獲取y坐標。
然后，對於每一行，根據對象內的days數組追加rects。
訣竅是執行兩個data（）聯接，第二個聯接從已聯接的數據中訪問days數組。
例如：
let data = [ { "days": [ 0, 0, 0, 0, 0, 1, 0 ], "total": 1, "week": 1457827200 }, { "days": [ 0, 0, 0, 1, 0, 3, 1 ], "total": 5, "week": 1458432000 }, { "days": [ 1, 0, 0, 1, 5, 0, 1 ], "total": 8, "week": 1459036800 }, { "days": [ 0, 0, 0, 2, 0, 1, 1 ], "total": 4, "week": 1459641600 }, { "days": [ 0, 1, 3, 0, 2, 0, 0 ], "total": 6, "week": 1460246400 }, { "days": [ 0, 1, 1, 2, 2, 0, 0 ], "total": 6, "week": 1460851200 }, { "days": [ 1, 0, 3, 0, 2, 1, 0 ], "total": 7, "week": 1461456000 }, { "days": [ 0, 0, 0, 0, 0, 0, 0 ], "total": 0, "week": 1462060800 } ] let gridSize = 20; let width = (gridSize + 1) * 7; let height = (gridSize + 1) * data.length; // define range!!! var x = d3.scaleLinear() .domain([0, 7]) .range([0, width]); //52 weeks var y = d3.scaleLinear() .domain([0, data.length]) .rangeRound([height, 0]); let svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) // Generate rows for each json object var rows = svg.selectAll('.row') .data(data) .enter() .append('g') .attr("transform", function(d, i){ return "translate(0," + y(i) + ")" }) // Generate rects for the array of days per object let box = rows.selectAll("rect") .data(function(d){ return d.days }) .enter() .append("rect") .attr("x", function(d, i) { return x(i); }) .attr("width", gridSize) .attr("height", gridSize) .style("fill", 'black') .attr("class", "bordered");
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> </body>
如何使用D3.js根據json中給出的數據在Heatmap中創建可變大小的矩形？
[英]How to create rectangles of variable size in Heatmap according to data given in json using D3.js?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.