Question

我正在尝试通过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); });

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; })来完成。

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

1 个答案: