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

Question

我试图让每个气泡的填充由 CSV 图表中的“填充”列设置。这是该骗子的链接: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); });

Answer 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; })简而言之。