Как создать легенду для D3 Sequence Sunburst?

Question

Я изменяю оригинальный файл D3 Sequence Sunburst, чтобы лучше соответствовать моим потребностям. Оригинал colors Переменная является жестко закодированным объектом. Это явно не может быть лучшим методом. Я использую пример flare.json, который больше по размеру, его труднее читать и который все же намного меньше, чем файл json, который я буду использовать после тестирования.

Я хотел бы генерировать цвета случайным образом, применять их к каждому элементу в createvisualization функции, но я новичок в D3, и не знаю, как 1) получить имена (все, кроме листьев) из файла JSON, и 2) сопрягать их с их случайным цветом.

Редактировать:

Добавление случайных цветов и их применение оказалось тривиальным,

var colors = d3.scale.category10();
...
.style("fill", function(d,i) { return colors(i); })

Но я до сих пор точно знаю, как извлечь имена всех не-листьев в json, а затем создать массив из случайных цветов и не-листьев.

Помощь здесь очень ценится.

Answer 1

Чтобы получить имена всех неконечных элементов, вы можете сделать что-то вроде этого.

var names = [];

function getNames(node) {
  if(node.children) {
    names.push(node.name);
    node.children.forEach(function(c) { getNames(c); });
  }
}

getNames(root);

После запуска этого кода, names будет содержать все имена, которые вы хотите. Чтобы затем создать легенду из этого, вы можете использовать names массив как данные:

var gs = svg.selectAll("g.name").data(names).enter().append("g").attr("class", "name");
gs.append("rect")
  // set position, size etc
  .attr("fill", d);
gs.append("text")
  // set position etc
  .text(String);

Это добавит g элемент для каждого имени и в каждом g элемент, добавить rect который заполнен цветом, соответствующим имени и text элемент, который показывает имя.