我想尝试使用我之前创建的这个Json文件的流程of Mike Bostock
{
"Irak": {
"Insgesamt_monat": [
1086,
1026,
1108,
1074,
1015,
693,
621,
752,
625,
645
],
"Position": [
"5",
"5",
"6",
"5",
"5",
"5",
"5",
"6",
"6",
"6"
],
"Entscheidungen insgesamt": [
8645,
7559,
6533,
5425,
4351,
3336,
2643,
2022,
1270,
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"
],
"Asylberechtigt": [
65,
60,
54,
47,
47,
30,
25,
21,
12,
6
]
},
"Mazedonien": {
"Insgesamt_monat": [
643,
564,
259,
553,
477,
315,
434,
395,
490,
604
],
"Position": [
"8",
"7",
"7",
"7",
"7",
"7",
"7",
"7",
"7",
"8"
],
"Entscheidungen insgesamt": [
4734,
4091,
3527,
3268,
2715,
2238,
1923,
1489,
1094,
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"
],
"Asylberechtigt": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"Serbien": {
"Insgesamt_monat": [
1118,
1036,
439,
1143,
1203,
1015,
1165,
1413,
1692,
2094
],
"Position": [
"6",
"6",
"4",
"4",
"4",
"4",
"4",
"4",
"3",
"3"
],
"Entscheidungen insgesamt": [
12318,
11200,
10164,
9725,
8582,
7379,
6364,
5199,
3786,
2094
],
"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"
],
"Asylberechtigt": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"Ungekl\u221a\u00a7rt": {
"Insgesamt_monat": [
455,
2147,
385
],
"Position": [
"10",
"10",
"9"
],
"Entscheidungen insgesamt": [
2987,
2532,
385
],
"Datum": [
"2015-10-01",
"2015-09-01",
"2015-01-01"
],
"Asylberechtigt": [
30,
29,
7
]
},
"Albanien": {
"Insgesamt_monat": [
7107,
7326,
3955,
4673,
2099,
1210,
799,
331,
233,
278
],
"Position": [
"2",
"2",
"2",
"3",
"3",
"3",
"3",
"3",
"4",
"4"
],
"Entscheidungen insgesamt": [
28011,
20904,
13578,
9623,
4950,
2851,
1641,
842,
511,
278
],
"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"
],
"Asylberechtigt": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"Afghanistan": {
"Insgesamt_monat": [
483,
397,
320,
429,
639,
434,
462,
527,
431,
418
],
"Position": [
"4",
"4",
"5",
"6",
"6",
"6",
"6",
"5",
"5",
"5"
],
"Entscheidungen insgesamt": [
4540,
4057,
3660,
3340,
2911,
2272,
1838,
1376,
849,
418
],
"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"
],
"Asylberechtigt": [
37,
36,
28,
27,
23,
21,
21,
17,
9,
0
]
},
"Kosovo": {
"Insgesamt_monat": [
1245,
827,
407,
1784,
1922,
3142,
5487,
7768,
1913,
536
],
"Position": [
"3",
"3",
"3",
"2",
"2",
"1",
"1",
"1",
"1",
"2"
],
"Entscheidungen insgesamt": [
25031,
23786,
22959,
22552,
20768,
18846,
15704,
10217,
2449,
536
],
"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"
],
"Asylberechtigt": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"Summe 1 bis 10": {
"Insgesamt_monat": [
25246,
18758,
12982,
16533,
12975,
11428,
13652,
16788,
11422,
11261
],
"Position": [
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
],
"Entscheidungen insgesamt": [
151045,
125799,
107041,
94059,
77526,
64551,
53123,
39471,
22683,
11261
],
"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"
],
"Asylberechtigt": [
1168,
1103,
1018,
921,
806,
685,
582,
495,
346,
182
]
},
"Syrien,Arabische Republik": {
"Insgesamt_monat": [
11758,
5044,
5831,
6130,
5878,
4177,
3953,
4802,
4887,
5874
],
"Position": [
"1",
"1",
"1",
"1",
"1",
"2",
"2",
"2",
"2",
"1"
],
"Entscheidungen insgesamt": [
58334,
46576,
41532,
35701,
29571,
23693,
19516,
15563,
10761,
5874
],
"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"
],
"Asylberechtigt": [
1018,
962,
915,
827,
721,
625,
530,
451,
321,
168
]
},
"Eritrea": {
"Insgesamt_monat": [
1153,
702,
527,
542,
514,
299,
267,
353,
365,
309
],
"Position": [
"7",
"8",
"8",
"8",
"8",
"8",
"8",
"8",
"8",
"7"
],
"Entscheidungen insgesamt": [
5031,
3878,
3176,
2649,
2107,
1593,
1294,
1027,
674,
309
],
"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"
],
"Asylberechtigt": [
16,
14,
13,
12,
10,
7,
6,
5,
3,
0
]
},
"Bosnien und Herzegowina": {
"Insgesamt_monat": [
227,
206,
341,
1048
],
"Position": [
"10",
"9",
"9",
"10"
],
"Entscheidungen insgesamt": [
1822,
1595,
1389,
1048
],
"Datum": [
"2015-05-01",
"2015-04-01",
"2015-03-01",
"2015-02-01"
],
"Asylberechtigt": [
0,
0,
0,
0
]
},
"Summe gesamt": {
"Insgesamt_monat": [
28600,
20166,
14954,
19767,
31792,
16130,
19549,
14201,
14528
],
"Position": [
"",
"",
"",
"",
"",
"",
"",
"",
""
],
"Entscheidungen insgesamt": [
179687,
151087,
130921,
115967,
96200,
64408,
48278,
28729,
14528
],
"Datum": [
"2015-10-01",
"2015-09-01",
"2015-08-01",
"2015-07-01",
"2015-06-01",
"2015-04-01",
"2015-03-01",
"2015-02-01",
"2015-01-01"
],
"Asylberechtigt": [
1638,
1537,
1436,
1289,
1102,
760,
634,
445,
243
]
},
"Pakistan": {
"Insgesamt_monat": [
198,
112,
60,
132,
912
],
"Position": [
"9",
"9",
"9",
"10",
"10"
],
"Entscheidungen insgesamt": [
1414,
1216,
1104,
1044,
912
],
"Datum": [
"2015-10-01",
"2015-09-01",
"2015-08-01",
"2015-07-01",
"2015-06-01"
],
"Asylberechtigt": [
2,
2,
2,
2,
2
]
},
"Nigeria": {
"Insgesamt_monat": [
76,
73,
138,
174,
106,
123,
118
],
"Position": [
"10",
"9",
"9",
"9",
"10",
"9",
"10"
],
"Entscheidungen insgesamt": [
808,
732,
659,
521,
347,
241,
118
],
"Datum": [
"2015-08-01",
"2015-07-01",
"2015-06-01",
"2015-05-01",
"2015-03-01",
"2015-02-01",
"2015-01-01"
],
"Asylberechtigt": [
6,
6,
3,
2,
1,
1,
1
]
},
"Somalia": {
"Insgesamt_monat": [
605
],
"Position": [
"10"
],
"Entscheidungen insgesamt": [
605
],
"Datum": [
"2015-04-01"
],
"Asylberechtigt": [
0
]
}
}
这是html文件
<!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){
//use data here
plot(data);
console.log(data);
})
function plot(data) {
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 = data.keys.length // I get stuck here
console.log(n);
var x = d3.time.scale()
.domain(d3.extent(data, function(d, i){
var date = dateParser(d.Datum[i]); // Do't know if this is legit either
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(data)
.enter()
.append("circle")
.classed("point", true)
.attr("r", 7);
svg.append("g")
.classed("axis x", true)
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.classed("axis y", true)
.attr("transform", "translate(70,0)")
.call(yAxis);
svg.selectAll(".point")
.style("fill", function(d){return colorScale(d.origin)});
//Update
svg.selectAll(".point")
.attr("cx", function(d){
var date = dateParser(d.date);
return x(date);
})
.attr("cy", function(d){
return y(d.value);
})
//Exit()
svg.selectAll(".point")
.data(data)
.exit()
.remove();
}
</script>
</body>
</html>
在Mike Bostock的例子中，我希望按价值和日期来堆叠几个国家。我因为无法获得Json文件的长度（国家总数）而无法为流程图声明变量。我知道JSON没有lentgh，因为它不是一个阵列，但我怎么能得到那些国家的数字呢？之后我有问题得到每个国家的“基准”，所以我可以在y上映射它。我用注释标记了这些行。我可以想象这是非常基本但我是D3的新手。
编辑1
var n = Object.keys(data).length // number of layers
console.log(n);
var m = 10 // number of samples per layer
var stack = d3.layout.stack().offset("wiggle")
var layers0 = stack(d3.range(n).map(function(d) { Object.keys(d).InsgesamtMonat; }))
//layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));
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]);
如何通过Objects.keys获取每个“Datum”的值？
这样的事情？
for(var key in objects) {
var value = objects[key];
}