d3 circle pack: setting circle colors

问题

I try to use http://mbostock.github.com/d3/ex/bubble.html but with changed colors.

I would like to find out how the colors are set in d3.layout.pack.

回答1:

In the example you mentioned, the circle color is defined here:

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

Here, d is the data, bound to the circle.
Instead of color, in this example the function passes an object (packageName attribute of d).
Each object gets own unique color assigned to it, according to selected color scale:

fill = d3.scale.category20c();

If you are happy with used criteria for coloring (packageName) and all you need is to change colors, you could change the palette (color scale):
https://github.com/mbostock/d3/wiki/Ordinal-Scales

if you want to change the coloring criteria, then you need to change the return part, replacing it with color value as a function of data d.

Here you can find D3 color constructors:
https://github.com/mbostock/d3/wiki/Colors

回答2:

You can change the json file for your data and tweak the d3 code to specify which color to fill the each individual bubbles with.

Below is my data, and you can see that I am specifying what color to fill the bubbles with.

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

Then, I add the color attribute that I specified into the node object so that it can be later accessed in d3 function.

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
  });
}

Then find the function responsible for coloring the bubbles and edit the fill function.

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

My code is edited from the code given at, http://bl.ocks.org/mbostock/4063269

来源：https://stackoverflow.com/questions/11788105/d3-circle-pack-setting-circle-colors

标签

javascript

d3.js

colors

circle-pack