Question

有一个使用d3.js https://bl.ocks.org/mbostock/3887235

制作饼图的示例

此示例中使用的是.csv文件。

age,population

<5,2704659
5-13,4499890
14-17,2159981
18-24,3853788
25-44,14106543
45-64,8819342
≥65,612463

我想使用json文件。

[
{"age": "<5",
"population": 2704659
},
{"age": "5-13",
"population": 4499890
},
{"age": "14-17",
"population": 2159981
},
{"age": "18-24",
"population": 3853788
},
{"age": "25-44",
"population": 14106543
},
{"age": "45-64",
"population": 8819342
},
{"age": ">=65",
"population": 612463
}
]

我需要在源文件中更改哪些代码？

我用过

d3.json("data.json", function(error, data) {

但它对我不起作用。

Answer 1

请看这个饼图：https://jsfiddle.net/reko91/qkHK6/1942/

数据是这样的：

var data = [{"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30}];

使用数据制作容器：

var vis = d3.select('#chart')
  .append("svg:svg")
  .data([data])

制作变量饼：

var pie = d3.layout.pie().value(function(d) {
  return d.value;
});

然后使用这个变量：

var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");

反过来又用来创建切片：

arcs.append("svg:path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d) {
    // log the result of the arc generator to show how cool it is :)
    console.log(arc(d));
    return arc(d);
  });

你去，通过json制作的饼图：）

这只是一个示例，显然无法实现确切的更改，除非您向我们展示您的代码

在d3.js饼图

1 个答案: