javascript - d3 圆圈包：设置圆圈颜色

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

://github.com/mbostock/d3/wiki/Ordinal-Scales 如果您想要更改着色标准，则需要更改返回部分，将其替换为颜色值作为 data 的函数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给出的代码编辑的