使用 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 永远不会 return 伪元素 select 的结果。

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

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

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

Targeting pseudo elements with d3 - is it possible?