Set unique bubble color in D3 Bubble Chart

Question

I'm trying to get the fill of each bubble to be set by the "fill" column in my CSV chart. Here is the link to the plunker: https://plnkr.co/edit/XIvmdQXLWFF8Nhz0VTps?p=preview

I believe it should be set at the style function below. I'm assuming my return color is not set correctly.

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

Caramiriel Caramiriel · Accepted Answer · 2016-12-08T17:47:12

color points to a function that returns a different predefined color on each call. In order to change the color of each bubble, you'll have to return color of the fill for that particular bubble.

If you would change the style to .style("fill", function(d) { console.log(d.data.fill); return color(d.data.fill); }), the strings of colors will be printed, so that's fine. All we have to do is to change the code to return the actual color. This can be done by changing it to .style("fill", function(d) { return d3.rgb(d.data.fill); }), or .style("fill", function(d) { return d.data.fill; }) in short.

Set unique bubble color in D3 Bubble Chart

1 Answers