Streamgraph示例D3的正確JSON格式結構
[英]right JSON format structure for Streamgraph example D3
問題描述
我試圖用D3.js的這種流圖布局來做一些例子。 我的數據具有這種格式。 因此，我的對象包含具有國家/地區名稱和對象的對象，在這些對象中，我有多個數組，每個數組的值和每個月的日期（“基准”）不同
{
"Irak": {
"Asylberechtigt": [
65,
60,
54,
47,
47,
30,
25,
21,
12,
6
],
"EntscheidungenInsgesamt": [
8645,
7559,
6533,
5425,
4351,
3336,
2643,
2022,
1270,
645
],
"InsgesamtMonat": [
1086,
1026,
1108,
1074,
1015,
693,
621,
752,
625,
645
],
"Datum": [
"2015-10-01",
"2015-09-01",
"2015-08-01",
"2015-07-01",
"2015-06-01",
"2015-05-01",
"2015-04-01",
"2015-03-01",
"2015-02-01",
"2015-01-01"
]
},
"Mazedonien": {
"Asylberechtigt": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"EntscheidungenInsgesamt": [
4734,
4091,
3527,
3268,
2715,
2238,
1923,
1489,
1094,
604
],
"InsgesamtMonat": [
643,
564,
259,
553,
477,
315,
434,
395,
490,
604
],
"Datum": [
"2015-10-01",
"2015-09-01",
"2015-08-01",
"2015-07-01",
"2015-06-01",
"2015-05-01",
"2015-04-01",
"2015-03-01",
"2015-02-01",
"2015-01-01"
]
}
}
對於流圖，我需要.values，我知道它必須返回使用此函數訪問的一些x和y值（例如，0為Irak，但最后我必須遍歷所有國家/地區）。 我認為這不是永久解決方案。 但是我的數據總體上應該是什么樣子，因為我意識到嵌套對我來說很混亂。 那么需要什么結構，以便我可以使用這些功能來可視化流圖？
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d){
for (var i = 0; i < d[countries[0]].Datum.length; i++) {
var dx = d[countries[0]].Datum[i];
var dy = d[countries[0]].InsgesamtMonat[i];
//console.log("Countries with InsgesamtMonat "+ countries[i]+" "+test);
dStack[i] = { x: dx, y: dy};
}
return dStack;
});
//.values(function(d) { return d[countries[0]].values; })
.x(function(d) { return d[countries[0]].Datum; })
.y(function(d) { return d[countries[0]].InsgesamtMonat; });
我還需要.x和.y嗎？
這是我的完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Testing Streamgraph</title> <link rel="stylesheet" href="main.css"> <script type="text/javascript" src="d3.min.js"></script> </head> <body> <!--Place all DOM elements here --> <script> d3.json("data.json", function(error, data){ console.log(data) plot(data); //console.log(data); }) function plot(data) { var dStack = []; var w = 800; var h = 450; var margin = { top: 100, bottom: 0, left: 80, right: 40 }; var width = w - margin.left - margin.right; var height = h - margin.top - margin.bottom; var svg = d3.select("body").append("svg") .attr("id", "chart") .attr("width", w) .attr("height", h) .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var dateParser = d3.time.format("%Y-%m-%d").parse; var colorScale = d3.scale.category20(); var n = Object.keys(data).length; var m = 10 // number of samples per layer //console.log(data[Object.keys("Asylberechtigt")[13]]) //var test = Object.keys(data).Asylberechtigt; var countries = Object.keys(data); console.log(countries); var stack = d3.layout.stack() .offset("wiggle") .values(function(d){ for (var i = 0; i < d[countries[0]].Datum.length; i++) { var dx = d[countries[0]].Datum[i]; var dy = d[countries[0]].InsgesamtMonat[i]; //console.log("Countries with InsgesamtMonat "+ countries[i]+" "+test); dStack[i] = { x: dx, y: dy}; } return dStack; }); //.values(function(d) { return d[countries[0]].values; }) .x(function(d) { return d[countries[0]].Datum; }) .y(function(d) { return d[countries[0]].InsgesamtMonat; }); var nest = d3.nest() .key(function(d) { return d.countries }); console.log(nest); var area = d3.svg.area() .interpolate("cardinal") .x(function(d){ var xStack = [] for (var i = 0; i < d[countries[0]].Datum.length; i++) { var dx = d[countries[0]].Datum[i]; xStack[i] = dx; } return xStack }) .y0(function(d) { return y(d.y0); }) .y1(function(d) { return y(d.y0 + dy); }); var layers = stack(nest.countries(data)); //Do i need to nest again because i already have the Countries as objects var x = d3.time.scale() .domain(d3.extent(data, function(d, i){ var date = dateParser(Object.keys(d).Datum(i)); // Do't know if this is legit either // date= 0; return date; })) .range([0+margin.left,width]); var y = d3.scale.linear() .domain([0, d3.max(data, function(d){ return d.value; })]) .range([height,0+margin.top]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); //enter() svg.selectAll(".point") .data(layers) .enter() } </script> </body> </html>
我不知道如何為我的數據聲明該層，您還能幫我嗎？
1 個解決方案
解決方案1
1 已采納 2015-12-18 20:10:23
我對這個問題一再支持，主要是出於無聊，但我認為我的評論有些苛刻。 就像我說的那樣，您的數據有太多的“ by”變量，因此，假設我們要使用“ InsgesamtMonat”，“ EntscheidungenInsgesamt”等可選過濾器按國家/地區流圖。因此問題就變成了如何獲取將此數據以JavaScript格式轉換為d3.layout.stack將理解的格式？
// give a stack defined as...
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) {
return d.values;
});
// convert data
// varToStackOn is "EntscheidungenInsgesamt"
var properData = [];
for (country in json) {
var obj = {};
obj.name = country;
obj.values = [];
json[country][varToStackOn].forEach(function(d, i) {
obj.values.push({
x: format.parse(json[country]["Datum"][i]),
y: d
});
})
properData.push(obj);
}
// and stack it
var stackedData = stack(properData);
一旦完成，遵循示例就變得容易了。
這一切都在一起：
<!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .chart { background: #fff; } p { font: 12px helvetica; } .axis path, .axis line { fill: none; stroke: #000; stroke-width: 2px; shape-rendering: crispEdges; } button { position: absolute; right: 50px; top: 10px; } </style> <body> <script src="http://d3js.org/d3.v3.js"></script> <div class="chart"> </div> <script> var json = { "Irak": { "Asylberechtigt": [65, 60, 54, 47, 47, 30, 25, 21, 12, 6], "EntscheidungenInsgesamt": [8645, 7559, 6533, 5425, 4351, 3336, 2643, 2022, 1270, 645], "InsgesamtMonat": [1086, 1026, 1108, 1074, 1015, 693, 621, 752, 625, 645], "Datum": ["2015-10-01", "2015-09-01", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01"] }, "Mazedonien": { "Asylberechtigt": [50, 20, 10, 14, 10, 6, 18, 32, 30, 12], "EntscheidungenInsgesamt": [4734, 4091, 3527, 3268, 2715, 2238, 1923, 1489, 1094, 604], "InsgesamtMonat": [643, 564, 259, 553, 477, 315, 434, 395, 490, 604], "Datum": ["2015-10-01", "2015-09-01", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01" ] } } var format = d3.time.format("%Y-%d-%m"); var stack = d3.layout.stack() .offset("wiggle") .values(function(d) { return d.values; }); var width = 300, height = 300; var x = d3.time.scale() .range([0, width]) .domain(d3.extent(["2015-10-01", "2015-09-01", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01"], function(d) { return format.parse(d); })); var y = d3.scale.linear() .range([height, 0]); var color = d3.scale.category10() var area = d3.svg.area() .x(function(d) { return x(dx); }) .y0(function(d) { return y(d.y0); }) .y1(function(d) { return y(d.y0 + dy); }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var stackOn = "InsgesamtMonat"; setInterval(function(){ if (stackOn === "InsgesamtMonat") stackOn = "EntscheidungenInsgesamt"; else if (stackOn === "Asylberechtigt") stackOn = "InsgesamtMonat"; else if (stackOn === "EntscheidungenInsgesamt") stackOn = "Asylberechtigt"; updateGraph(stackOn); }, 1000); function updateGraph(varToStackOn) { var properData = []; for (country in json) { var obj = {}; obj.name = country; obj.values = []; json[country][varToStackOn].forEach(function(d, i) { obj.values.push({ x: format.parse(json[country]["Datum"][i]), y: d }); }) properData.push(obj); } var stackedData = stack(properData); y.domain([0, d3.max(stackedData, function(layer) { return d3.max(layer.values, function(d) { return d.y0 + dy; }); })]); var paths = svg.selectAll("path") .data(stack(properData)) paths .enter().append("path") .style("fill", function(d, i) { return color(i); }); paths.transition() .attr("d", function(d) { return area(d.values); }); } </script> </body> </html>
在D3 Streamgraph中正確使用stack.values（[accessor]）？
[英]Correct usage of stack.values([accessor]) in D3 Streamgraph?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.