D3 Circle Pack: настройка цветов круга

Question

Я пытаюсь использовать http://mbostock.github.com/d3/ex/bubble.html но с измененными цветами.

Я хотел бы узнать, как цвета установлены в d3.layout.pack.

Answer 1

В приведенном выше примере цвет круга определяется здесь:

.style("fill", function(d) { return fill(d.packageName); });

Вот, d это данные, привязанные к кругу.
Вместо цвета в этом примере функция передает объект (атрибут packageName d).
Каждый объект получает свой уникальный цвет, назначенный ему, в соответствии с выбранной цветовой шкалой:

fill = d3.scale.category20c();

Если вы удовлетворены использованными критериями для окраски (packageName) и все, что вам нужно, это изменить цвета, вы можете изменить палитру (цветовую гамму):
https://github.com/mbostock/d3/wiki/Ordinal-Scales

если вы хотите изменить критерии окраски, то вам нужно изменить возвращаемую деталь, заменив ее значением цвета в зависимости от данных d,

Здесь вы можете найти конструкторы цвета D3:
https://github.com/mbostock/d3/wiki/Colors

Answer 2

Вы можете изменить файл json для ваших данных и настроить код d3, чтобы указать, какой цвет будет заполнять каждый отдельный пузырь.

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

{
  "name": "sentiment",
  "children": [
    {
      "name": "positive",
      "children": [
        {
          "name": "iphone", "size": 2000, "color": "green"
        }
      ]
    }
  ]
}

Затем я добавляю атрибут цвета, который я указал, в объект узла, чтобы к нему позже можно было получить доступ в функции d3.

function recurse(name, node) {
  if (node.children) node.children.forEach(function(child) {
    recurse(node.name, child);
  });
  else classes.push({
    packageName: name,
    className: node.name,
    value: node.size,
    color: node.color
  });
}

Затем найдите функцию, отвечающую за окрашивание пузырьков, и отредактируйте функцию заливки.

node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return d.color; });

Мой код редактируется из кода, указанного на http://bl.ocks.org/mbostock/4063269