Question

我正在尝试使用d3构建一个饼图数组，这些饼图的大小会根据饼图中数据的总值而变化。

有谁知道如何从d3示例中获取html文件：

http://bl.ocks.org/mbostock/3888852

并将饼图半径修改为与该饼图的csv文件中的数据总和成比例？

Answer 1

这是一个快速尝试：

...

data.forEach(function(d) {
    d.total = 0;
    d.ages = color.domain().map(function(name) {
      d.total += +d[name]; // add a total of all population for each state
      return {name: name, population: +d[name]};
    });
  });

  // determine the maximum population for all states (ie California)
  var maxPopulation = d3.max(data, function(d){
    return d.total;
  });

  // now for each d.age (where the the arcs come from)
  // stash an arc function based on a scaled size
  data.forEach(function(d) {
    var r = radius * (d.total / maxPopulation);
    var someArc = d3.svg.arc() // make the radius scale according to our max population
      .outerRadius(r)
      .innerRadius(r - (r-10));
    d.ages.forEach(function(a){
      a.arc = someArc; // stash the arc in the d.ages data so we can access later
    })
  });

  ...  
  svg.selectAll(".arc")
    .data(function(d) { return pie(d.ages); })
    .enter().append("path")
    .attr("class", "arc")
    .attr("d", function(d){
      return d.data.arc(d);  // use our stashed arc function to create the path arc
    })
    .style("fill", function(d) { return color(d.data.name); })

示例here。

您可能需要更改我如何缩放饼图的大小。我的线性方法有效，但是一些州的人与CA相比人数太少，他们的饼图是可以查看的。

如何根据饼图总数改变饼图的大小？

1 个答案: