如何在d3.js饼图中读取嵌套的json？

Question

我想从嵌套的json文件创建饼图。这里是我现在使用的简单的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，如果有人可以给我指针，这将是很好的。

Answer 1

您对您的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访问器没有返回条目的结构。希望这可以帮助更多。