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是綁定到圓的數據。
在這個例子中，函數傳遞一個對象（ d packageName屬性）而不是顏色。
根據選定的色標，每個對象都會分配給它自己的唯一顏色：

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給出的代碼編輯的