使用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的选择函数所基于的querySelector方法永远不会返回伪元素选择器的结果.

此外,D3 style方法通过在所选元素上设置内联样式属性来工作.您不能为伪元素设置内联样式,因此在父元素上设置style属性也不起作用.

你可以做的是选择父元素,给它们一个类名,然后使用CSS样式表规则来定位该类对象的:before/ :afterpseudo元素.如果您需要动态创建CSS规则,请参阅此问答.

但是,最简单的方法是创建空元素<span>或<div>子元素,并将其设置为样式.