在 D3 气泡图中设置独特的气泡颜色

【问题标题】：Set unique bubble color in D3 Bubble Chart在 D3 气泡图中设置独特的气泡颜色
【发布时间】：2016-12-08 17:37:13
【问题描述】：

我试图让每个气泡的填充由我的 CSV 图表中的“填充”列设置。这是 plunker 的链接：https://plnkr.co/edit/XIvmdQXLWFF8Nhz0VTps?p=preview

我相信它应该设置在下面的样式函数中。我假设我的返回颜色设置不正确。

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

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

color 指向一个函数，该函数在每次调用时返回不同的predefined color。为了更改每个气泡的颜色，您必须返回该特定气泡的填充颜色。

如果您将样式更改为.style("fill", function(d) { console.log(d.data.fill); return color(d.data.fill); })，则会打印颜色字符串，这很好。我们所要做的就是更改代码以返回实际颜色。这可以通过将其更改为 .style("fill", function(d) { return d3.rgb(d.data.fill); }) 或简称为 .style("fill", function(d) { return d.data.fill; }) 来完成。

【讨论】：