Targeting Pseudo-Elemente mit d3 - ist das möglich?

Question

Dies funktioniert gut:

d3.selectAll('ul li') 
    .style('background', 'red'); 

Dies ist jedoch nichts tut:

d3.selectAll('ul li:before') 
    .style('background', 'red'); 

Die von d3.selectAll('ul li:before') zurück Auswahl ist leer, obwohl die :before Elemente existieren, und haben einige bestehende CSS-Styling.

Ist es möglich, Pseudoelemente mit d3 auszurichten?

Und wenn es eine schnelle Follow-up-Frage: Wie würde ich alle :before Pseudo-Elemente zielen direkt auf (dh nicht innerhalb) eine bestimmte Auswahl?

ZB:

var listItems = d3.selectAll('ul li'); 
var beforeElements = listItems.selectAll('&:before'); // SASS-style selector obviously won't work here 

Answer 1

Es ist nicht möglich, ist die Art und Weise Sie versuchen, es zu tun.

Die querySelector methods, auf der die Auswahlfunktionen von D3 basieren, gibt niemals Ergebnisse für Pseudoelementselektoren zurück.

Darüber hinaus funktioniert die D3 style-Methode durch Festlegen von Inline-Style-Attributen für die ausgewählten Elemente. Sie können Inline-Stile für Pseudo-Elemente nicht festlegen, daher wird auch das Festlegen des Stil-Attributs für das übergeordnete Element nicht funktionieren.

Was Sie konnte tun ist, um die übergeordneten Elemente auswählen, so dass sie einen Klassennamen geben, und dann CSS-Stylesheet-Regeln verwenden, um die :before/:after Pseudoelemente für Objekte dieser Klasse zu zielen. Wenn Sie die CSS-Regeln dynamisch erstellen müssen, see this Q&A.

Es ist jedoch wahrscheinlich am einfachsten, einfach untergeordnete Elemente <span> oder <div> zu erstellen und diese stattdessen zu formatieren.