d3.js - 使用 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

您尝试这样做的方式是不可能的。

querySelector methods ，D3 的选择函数所基于的，永远不会返回伪元素选择器的结果。

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

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

然而，创建空的 <span> 可能是最简单的。或 <div>子元素，并为它们设置样式。