Javascript D3,迭代对象,在同一容器中创建多个饼图
我有一些用于创建许多图表的数据。我正在使用d3.nest创建一个键,以便按日期组织图表。除了我无法让pie函数在正在创建的2个示例对象上迭代之外,其他一切似乎都正常工作 以下是代码片段:Javascript D3,迭代对象,在同一容器中创建多个饼图,javascript,d3.js,Javascript,D3.js,我有一些用于创建许多图表的数据。我正在使用d3.nest创建一个键,以便按日期组织图表。除了我无法让pie函数在正在创建的2个示例对象上迭代之外,其他一切似乎都正常工作 以下是代码片段: var data1 = [ {"date":"June2013", "type":"coal", "total":20, "color": "purple", "lat": 100, "long": 100}, {"date":"June2013", "type":"wind", "total"
var data1 = [
{"date":"June2013", "type":"coal", "total":20, "color": "purple", "lat": 100, "long": 100},
{"date":"June2013", "type":"wind", "total":30, "color": "blue", "lat": 100, "long": 100},
{"date":"June2013", "type":"nuclear", "total":40, "color": "yellow", "lat": 100, "long": 100},
{"date":"July2013", "type":"coal", "total":50, "color": "purple", "lat": 500, "long": 200},
{"date":"July2013", "type":"wind", "total":60, "color": "blue", "lat": 500, "long": 200},
{"date":"July2013", "type":"nuclear", "total":70, "color": "yellow", "lat": 500, "long": 200}
];
var energyT = d3.nest()
.key(function(d) {
return d.date;
})
.entries(data1);
var arc = d3.svg.arc()
.innerRadius(40)
.outerRadius(50);
var pie = d3.layout.pie()
.value(function (d){
return d.total;
});
//console.log("what is the length of energyT: " + energyT.length)
//printout: what is the length of energyT: 2
//it knows there are 2 objects
var arcs = svg.selectAll("arc")
//.data(pie(energyT[0].values))
.data(function (d, i){
//console.log("what is i: " + JSON.stringify(energyT[i].values))
//printout: what is i: [{"date":"June2013","type":"coal","total":20,"color":"purple","lat":100,"long":100},...
//it correctly passes the values of the first object
//but it doesn't iterate to the next
return pie(energyT[i].values);
})
.enter()
.append("svg:g")
.attr("transform", function(d){
return "translate(" + d.data.lat+ "," + d.data.long + ")"
});
arcs.append("path")
.attr("d", arc)
.attr("fill", function (d) {
console.log("what is d in color " + JSON.stringify(d.data.color))
return d.data.color;
});
});
另外,如果我向它传递一个精确的索引(.data(pie(energyT[0].values)),它将绘制该图表。我不知道如何迭代这两个对象。任何建议都将不胜感激。我能够让它读取有两个对象。我还需要在函数中传递energyT,如下所示:
.data(energyT, function (d, i){
return pie(energyT[i].values);
})
这部分问题解决了,现在我无法让它画任何圆弧,因为路径值无效。奇怪的是,我可以在不使用d3.nest创建键值的情况下传递数据,但一旦我添加键值,即使这些值看起来传递正确,它也不再起作用
我最初的问题已经解决了