Wie fügt man mehrere untergeordnete Elemente an ein div in d3.js an?

Ich versuche, zwei span s anhängen zu einem div mit dem folgenden Code:Wie fügt man mehrere untergeordnete Elemente an ein div in d3.js an?

d3.select("#breadcrumb") 
      .append("span") 
      .attr("class","breadcrumb-link") 
      .text(d.name) 
      .append("span") 
      .text("/");

Aber das fügt Elemente wie:

<div id="breadcrumb"> 
    <span> 
     <span> 
     </span> 
    </span> 
</div>

ich span s als Geschwister hinzufügen möchten:

<div id="breadcrumb"> 
    <span> 
    </span> 

    <span> 
    </span> 
</div>

Ich weiß, dass dies getan werden kann, indem Sie zuerst dieauswählenund dann 2 Anweisungen für jede span. Kann ich dies in einer einzigen verketteten Anweisung tun?

Quelle

2016-06-02 ayushgp

Sie können sie anhängen, wenn divs nicht bereits in html definiert sind oder wählen Sie es aus, wenn div in html existiert. – SiddP

Mögliches Duplikat von [Anfügen mehrerer nicht verschachtelter Elemente für jedes Datenelement mit D3.js] (http://stackoverflow.com/questions/21485981/appending-multiple-non-nested-elements-for-each-data-member) -mit-d3-js) – dariru

@echonax Oh, Entschuldigung. Aber ich denke, dass eine Antwort für diese eine Frage auch in dieser vorherigen Frage zur Verfügung gestellt wird. Sollte das in Ordnung sein? http://Stackoverflow.com/a/33809812/2036808 – dariru

d3.js basiert auf der Idee von datengetriebenen Dokumenten. Das heißt, normalerweise haben Sie data als array, dass Sie mit einer Auswahl verbinden werden.

In diesem Sinne könnten Sie einen einfachen Hack versuchen, indem Sie die Auswahl d3.select("#breadcrumb") mit einem "künstlichen" Array [1, 2] verbinden. Dies würde wie folgt aussehen:

d3.select("#breadcrumb").data([1, 2]).enter().append('span')...

Hinweis, den Anruf von enter().

Wenn Sie andere Klassenattribute setzen möchten, könnten Sie diese Daten in das Datenfeld stopfen.

Quelle

2016-06-02 06:20:31 rmoestl

Wie fügt man mehrere untergeordnete Elemente an ein div in d3.js an?

Antwort

Verwandte Themen