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

中给出的代码编辑的

d3 circle pack：设置圆圈颜色

2 个答案: