使用嵌套json数据的d3热图：如何创建网格
[英]d3 heatmap using nested json data: how to create grids
问题描述
Referring to this example here: http://bl.ocks.org/tjdecke/5558084 
在此引用此示例： http : //bl.ocks.org/tjdecke/5558084
I would like to create a heatmap of 52 rows, and 7 columns. 我想创建一个包含52行和7列的热图。 52 rows represents the 52 weeks of a year, and 7 column represents 7 days of a week. 52行代表一年的52周，而7列代表一周的7天。
With a dataset like this: (posting abbreviated version below). 使用这样的数据集：（在下面发布缩写版本）。 "days" signify the 7 days of a week, the numbers inside signify number of activity within a day. “天”表示一周中的7天，其中的数字表示一天中的活动数量。 "total" signifies total number of activity in a week. “总数”表示一周中的活动总数。 "week" seems to be a timestamp of sorts. “星期”似乎是一种时间戳。
However, I am having difficulty figuring out how to create the grids, as the example dataset uses d.day with 7 values and d.hour with 24 values to create the grid. 但是，我很难弄清楚如何创建网格，因为示例数据集使用具有7个值的d.day和具有24个值的d.hour来创建网格。 Specifically, what should i be doing with the days array? 具体来说，我应该如何处理days数组？
I am not sure on how to process the json values as well, as in, how should i be defining my variables to work with this dataset. 我不确定如何处理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
with your nested data, you could first append group elements per object to create a "row" in your grid for each week, which get their y coordinate based on their index. 使用嵌套的数据，您可以首先为每个对象附加组元素，以每周在网格中创建一个“行”，然后根据它们的索引获取y坐标。
Then for each row, append rects based on the days array within object. 然后，对于每一行，根据对象内的days数组追加rects。
The trick is to do two data() joins, with the second join accessing the days array from within the already joined data. 诀窍是执行两个data（）联接，第二个联接从已联接的数据中访问days数组。
For example: 例如：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.