用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從不返回僞元素選擇器的結果。

此外，D3 style方法的工作原理是在所選元素上設置內聯樣式屬性。您不能爲僞元素設置內聯樣式，因此在父元素上設置style屬性也不起作用。

什麼你能要做的只是選擇父元素，給他們一個類名，然後使用CSS樣式表規則來指定該類的對象:before/:after僞元素。如果你需要動態創建CSS規則，see this Q&A。

但是，最簡單的方法是創建空的<span>或<div>子元素，然後改爲使用這些子元素。