使用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 methods永远不会返回伪元素选择器的结果。

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

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

但是，最简单的方法是创建空的<span>或<div>子元素，然后设置样式。