如何在d3.js饼图中读取嵌套的json?
问题描述:
我想从嵌套的json文件创建饼图。这里是我现在使用的简单的json。如何在d3.js饼图中读取嵌套的json?
样品JSON文件
[
{
"origin":"June2013",
"carrier":"9E",
"count":5
},
{
"origin":"June2013",
"carrier":"AA",
"count":22
},
{
" origin":"June2013",
"carrier":"MQ",
"count":2
},
{
"origin":"July 2013",
"carrier":"9E",
"count":2
},
{
"origin":"July 2013",
"carrier":"AA",
"count":448
},
{
"origin":"July 2013",
"carrier":"XE",
"count":4
}]
,我从这个创建了(我想用这个)
{
"title":[{"caption":"Alert"}],
"xaxis":[{"name":"origin","label":"Month Year"}],
"yaxis":[{"name":"count","label":"Alert Number"}],
"table":[{
"column1":"origin",
"column2":"count",
"column3":"carrier"}],
"data":[
{
"origin":"June2013",
"carrier":"9E",
"count":5
},
{
"origin":"June2013",
"carrier":"AA",
"count":22
},
{
"origin":"June2013",
"carrier":"MQ",
"count":2
}]
}
我的样本JavaScript文件
<script type="text/javascript">
d3.json("flights.json", function(flights) {
var m = 10,
r = 100,
z = d3.scale.category20c();
var pie = d3.layout.pie()
.value(function(d) { return +d.count; })
.sort(function(a, b) { return b.count - a.count; });
var arc = d3.svg.arc()
.innerRadius(r/2)
.outerRadius(r);
var airports = d3.nest()
.key(function(d) { return d.origin; })
.entries(flights);
var svg = d3.select("body").selectAll("div")
.data(airports)
.enter().append("div")
.style("display", "inline-block")
.style("width", (r + m) * 2 + "px")
.style("height", (r + m) * 2 + "px")
.append("svg:svg")
.attr("width", (r + m) * 2)
.attr("height", (r + m) * 2)
.append("svg:g")
.attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");
svg.append("svg:text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.key; });
var g = svg.selectAll("g")
.data(function(d) { return pie(d.values); })
.enter().append("svg:g");
g.append("svg:path")
.attr("d", arc)
.style("fill", function(d) { return z(d.data.carrier); })
.append("svg:title")
.text(function(d) { return d.data.carrier + ": " + d.data.count; });
g.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("svg:text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })
.text(function(d) { return d.data.carrier; });
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90/Math.PI - 90;
return a > 90 ? a - 180 : a;
}
});
</script>
预计输出看起来
嵌套JSON像这样
http://bl.ocks.org/mbostock/1305337
我对此很陌生,不知道如何在这里读取嵌套的json,如果有人可以给我指针,这将是很好的。
答
您对您的d3.nest条目需要是flights.data属性(对象数组)
.entries(flights.data);
阐述:
见d3.nest Documentation。 总之,在你的情况下,d3.nest()运算符
- 注意到通过
nest.entries(flights.data)
- 指定的扁平集合(对象的数组)返回一个阶层式(你的情况,只有一个水平June2013 )分组由键访问功能分组,你的开发人员工具指定使用
next.key(function(d) { return d.origin; })
这里有一个小提琴http://jsfiddle.net/zLxzf1fw/,看看下面这一节,检查日志
// before
console.log(flights.data);
var airports = d3.nest()
.key(function(d) { return d.origin; })
.entries(flights.data);
// after
console.log(airports);
总而言之,以前没有给出您的.key访问器没有返回条目的结构。希望这可以帮助更多。
请您详细说明一下,以便我可以清楚了解。 – user3543707 2014-09-30 23:14:26