Добавление имен классов в дуги из данных в d3.layout.pie()

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().

спасибо!

Answer 1

Некоторые макеты 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; }; 

Answer 2

d3 в услужливо предоставляют .value() accessor, который позволяет определить, как получить значение опорной точки, вместо того, чтобы делать операцию data.map(). Итак, вы могли бы сделать:

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

Таким образом, исходная дата сохраняется в d.data.

Таким образом, используя это определение пирога, ваш код изменится на это:

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

редактировать: Добавлена ​​ссылка на соответствующую документацию.