Question

我正在从JSON文件创建饼图。我想知道是否有一种方法可以从JSON文件中获取一些名称，并将它们指定为d3.layout.pie（）创建的弧的类名。

以下是我创建的示例：http://blockbuilder.org/jinlong25/532d889e01d02cef2d24

基本上，我想做下面最后一行代码：

var data = [
  {
    'name': 'apple',
    'value': 250
  },
  {
    'name': 'banana',
    'value': 100
  },
  {
    'name': 'orange',
    'value': 150
  }
];

var arcs = svg.selectAll('g.arc')
              .data(pie(data.map(function(d) { return d.value; })))
              .enter().append('g')
              .attr('transform', 'translate(70, 70)')
              .attr('class', function(d) { return d.name; };

但是由于数据已经被pie（）转换，我想知道是否还有为class（）生成的数据添加类名。

谢谢！

Answer 1

d3的布局有助于提供.value() accessor，它允许您指定获取数据值的方式，而不是执行data.map（）操作。所以，你可以这样做：

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

这样，您的原始数据将保存在d.data中。

因此，使用pie的定义，您的代码将更改为：

var arcs = svg.selectAll('g.arc')
          .data(pie(data))
          .enter().append('g')
          .attr('transform', 'translate(70, 70)')
          .attr('class', function(d) { return d.data.name; };

编辑：添加链接相关文档。

Answer 2

一些D3布局会改变原始数据集，但其他布局会创建一个新的数据集（如voronoi）。在这些情况下，您可以在使用新数据集时使用原始数据集中的数组位置。所以从你的例子来看：

var arcs = svg.selectAll('g.arc')
          .data(pie(data.map(function(d) { return d.value; })))
          .enter().append('g')
          .attr('transform', 'translate(70, 70)')
          .attr('class', function(d,i) { return data[i].name; };

从d3.layout.pie（）

2 个答案: