colors - d3.rgb().darker/brighter

Question

我正在使用 d3 绘制条形图，其中条形用于比较不同的组（例如男性/女性）。对于填充，我采用保存在数据文件（json）中的颜色并使用d3.rgb().darker()/.brighter().

.attr("fill", function(d){return d3.rgb(d.color).darker(1);})

它在 Firefox 中有效，但在 Internet Explorer 9 中，所有的条都显示为黑色（这是第一个使用的颜色）。我想知道这是否只是这个浏览器的一个问题，或者我是否遗漏了一些东西来避免这种行为。

一种解决方案当然是单独分配颜色，但如果可能的话，我想使用提供的可能性。

Answer 1

发生这种情况是因为您使用attr("fill")而不是style("fill")设置样式属性。

该style函数包括一些额外的检查，以便在需要时将属性值转换为适当的字符串，因此您无需toString()手动执行此操作。

将您的原始行更改为：

.style("fill", function(d){return d3.rgb(d.color).darker(1);})

应该适用于包括 IE 在内的所有浏览器。