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

【问题标题】：Targeting pseudo elements with d3 - is it possible?使用 d3 定位伪元素 - 有可能吗？
【发布时间】：2015-03-03 01:07:45
【问题描述】：

这很好用：

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

【问题讨论】：

标签： d3.js

【解决方案1】：

这不可能按照您尝试的方式进行。

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

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

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

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

【讨论】：