用d3定位伪元素 - 有可能吗？

Question

这只是正常：

d3.selectAll('ul li') 
    .style('background', 'red'); 

然而，这并不做任何事情：

d3.selectAll('ul li:before') 
    .style('background', 'red'); 

通过d3.selectAll('ul li:before')返回的选择是空的，即使确实存在:before元素，有一些现有的CSS样式。

是否可以使用d3定位伪元素？

而如果是，快速跟进的问题：如何将针对所有:before伪元素直接（即内没有）特定的选择？

如：

var listItems = d3.selectAll('ul li'); 
var beforeElements = listItems.selectAll('&:before'); // SASS-style selector obviously won't work here 

Answer 1

这是不可能的，你正在试图做到这一点。

D3的select函数基于的querySelector methods从不返回伪元素选择器的结果。

此外，D3 style方法的工作原理是在所选元素上设置内联样式属性。您不能为伪元素设置内联样式，因此在父元素上设置style属性也不起作用。

什么你能要做的只是选择父元素，给他们一个类名，然后使用CSS样式表规则来指定该类的对象:before/:after伪元素。如果你需要动态创建CSS规则，see this Q&A。

但是，最简单的方法是创建空的<span>或<div>子元素，然后改为使用这些子元素。