Добавление имен классов к дугам из данных в 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(), мне интересно, есть ли способ добавить имена классов к данным, сгенерированным функцией 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(), который позволяет вам указать, как получить значение элемента данных вместо выполнения операции 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; };

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