我有以下数据集:
"data":[
["1951","306","27","159","34","82","4"],
["1956","426","41","203","47","119","16"],
["1959","562","67","267","48","148","32"],
["1960","605","76","282","54","157","36"],
["1961","665","88","310","57","168","42"],
["1962","749","116","340","60","189","44"],
["1963","847","140","375","63","215","54"],
...
每个数组中的第一个条目是年份。我创建了两个坐标轴w.r.t.这个数据。现在,对于每个条目,我想创建6个圆形元素。如何使用以下行的变体来执行此操作:
var circles = svg.selectAll("circle")
.data(data.data)
.enter()
.append("circle");
var circleAttr = circles. //Attributes defined here
答案 0 :(得分:1)
您可以连续两次使用.selectAll(...).data(...).enter(...).append(...)
模式,将函数传递给.data
第二个(及更晚)时间,您接受上一级别的数据并返回数据数组该级别的项目。
以下是使用您的数据的一个小例子:
var colors = d3.scale.category10().domain([1951, 1963]);
var data = [
["1951", "306", "27", "159", "34", "82", "4"],
["1956", "426", "41", "203", "47", "119", "16"],
["1959", "562", "67", "267", "48", "148", "32"],
["1960", "605", "76", "282", "54", "157", "36"],
["1961", "665", "88", "310", "57", "168", "42"],
["1962", "749", "116", "340", "60", "189", "44"],
["1963", "847", "140", "375", "63", "215", "54"]
];
d3.select("body")
.append("svg")
.attr("width", 1000)
.attr("height", 1000)
.selectAll("g")
.data(data)
.enter()
.append("g")
.selectAll("circle")
.data(function(d) {
var year = +d[0];
return d.slice(1).map(function(value) {
return {
year: year,
value: +value
};
});
})
.enter()
.append("circle")
.attr("r", 2)
.attr("cx", function(d) {
return d.value;
})
.attr("cy", function(d) {
return d.value;
})
.attr("fill", function(d) {
return colors(d.year);
});