d3.rgb().darker/brighter答案

【问题标题】：d3.rgb().darker/brighterd3.rgb().darker/brighter
【发布时间】：2013-03-23 16:12:33
【问题描述】：

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

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

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

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

【问题讨论】：

如果您不使用d3.rgb 而只是硬编码一种颜色——比如return #f00;——它会在IE9 中显示为红色吗？如果不是，则表明是其他原因导致了问题。
是的，按预期工作，所以问题似乎在于更暗/更亮的功能。
如果以下内容有所不同，我会感到非常惊讶，但请尝试return d3.rgb(d.color).darker(1).toString()。另外，console.log 颜色，看看有没有什么奇怪的地方。
添加 toString() 成功了，谢谢。

【解决方案1】：

这是因为您使用attr("fill") 而不是style("fill") 来设置样式属性。

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

将原来的行改为：

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

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

【讨论】：