获得D3中的元素颜色

Question

对于以下d3代码：

var previousElement = d3.select(this);
console.log(previousElement.attr("style"));

结果如下：

fill: red;

或

fill: rgb(152, 223, 138);

然后我怎样才能得到这个元素的确切颜色，这样我就可以做出如下判断：

if ( elementColor == 'red')

或

if (elementColor == 'rgb(152, 223, 138)')

我尝试var elementColor = previousElement.attr("style").fill，它返回null。

Answer 1

我相信你想要的是previousElement.style('fill')而不是.attr('style')。有关文档，请参阅https://github.com/mbostock/d3/wiki/Selections#style。

您可能还想查看D3色彩文档https://github.com/mbostock/d3/wiki/Colors，因为这可能对您有所帮助。

Answer 2

您可以使用d3.rgb()来解析指定为样式的内容，然后比较R，G和B组件：

var colour = d3.rgb(previousElement.attr("style"));
if(colour.r == 255 && colour.g == 0 && colour.b == 0) {
  // ...
}