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
 }]

我从中创建的嵌套json（我想使用这个）

{

"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>

预期输出看起来像这样

 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)
返回一个层次结构（在您的情况下，只有一个级别2013年6月）分组按您使用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访问者没有返回条目的结构。希望这会有所帮助。

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

1 个答案: