[英]Javascript, JSON,D3 and accessing nested variables to create a pie chart
I need to iterate over an array's field in my JSON document. 我需要在JSON文档中遍历数组的字段。 The field I would like is "total" in the energy array.
我想要的字段是能量数组中的“总计”。 Here is my sample json doc.
这是我的示例json文档。
[
{
"time": "01/01/2000",
"country": "USA",
"energy":
[
{"type": "coal", "total": 25, "color": "black"},
{"type": "wind", "total": 25, "color": "blue"},
{"type": "nuclear", "total": 25, "color": "yellow"}
],
"lat": 180,
"lon": 225
},
{
"time": "01/02/2000",
"country": "USA",
"energy":
[
{"type": "coal", "total": 50, "color": "black"},
{"type": "wind", "total": 50, "color": "blue"},
{"type": "nuclear", "total": 50, "color": "yellow"}
],
"lat": 180,
"lon": 225
},
{
"time": "01/03/2000",
"country": "USA",
"energy":
[
{"type": "coal", "total": 100, "color": "black"},
{"type": "wind", "total": 100, "color": "blue"},
{"type": "nuclear", "total": 100, "color": "yellow"}
],
"lat": 180,
"lon": 225
}
] ]
I want to create a pie chart for each date, so each pie chart will have "coal", "wind" and "nuclear" totals. 我想为每个日期创建一个饼图,因此每个饼图将具有“煤”,“风”和“核”总计。 I am obviously not accessing the data properly because the chart I am creating is coal = 25, wind = 50, and nuclear = 100.
我显然无法正确访问数据,因为我创建的图表是煤= 25,风= 50和核= 100。
Here is the snippet from my javascript: 这是我的javascript的代码段:
//beginning of test data for pie2
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
d3.json("energyFormat.json",function (data) {
data.forEach(function(d, i){
console.log("what is d.total: " + d.energy[i].total)
d.energy[i]=d.energy[i++]
})
var arc = d3.svg.arc()
.outerRadius(40)
.innerRadius(30);
var pie = d3.layout.pie()
.sort(null)
.value(function (d, i) {
//console.log("is d.total :" + d.energy[i].total )
return d.energy[i].total;
});
var g = svg.selectAll("arc")
.data(data)
.enter().append("g")
.attr("transform", function(d, i){
//console.log("what is d.lon: " + d.lon)
//console.log("what is d.energy: " + d.energy[i])
return "translate(" + d.lon + "," + d.lat + ")" });
g.append("path")
.data(pie(data))
.attr("d", arc)
.style("fill", function (d, i) {
//console.log("is this color " + d.data.energy[i].color)
return d.data.energy[i].color;
});
g.append("text")
.data(pie(data))
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.style("fill", "white")
.style("font-size","12px")
.text(function (d, i) {
console.log(d.data.energy[i].total);
return d.data.energy[i].type;
});
});
//end of test data for pie2
I can see how to access a specific value in the field I'm looking for (data[0].energy[0].total) which would be 5. But how can I iterate over all the totals in energy[0] and then energy[1], etc? 我可以看到如何在我要查找的字段中访问特定值(data [0] .energy [0] .total),该值为5。但是如何遍历energy [0]和那么能源[1],等等? I played around with the forEach function but I couldn't get it to work.
我使用了forEach函数,但无法正常工作。 I hope my question makes sense.
我希望我的问题有道理。 Any help or pointing in the right direction would be very appreciated.
任何帮助或指出正确的方向将不胜感激。 I've been looking at this code for awhile without a break through.
我一直在看这段代码,没有任何突破。
Not sure if this is what you are looking for or not.... 不确定这是否是您要的...。
for(var i = 0; i < data.length; i++) {
for(var j = 0; j < data[i].energy.length; j++) {
console.log(data[i].energy[j].total, 'energy total')
}
}
Alternative since you use foreach: 由于您使用foreach,因此可以选择:
data.forEach(function(element, index){
element.energy.forEach(function(element, index) {
console.log(element.total, 'energy total')
})
})
fiddle https://jsfiddle.net/6cf31spn/ 小提琴https://jsfiddle.net/6cf31spn/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.