Wie erstellt man nur ein li-Element pro Aufruf von d3.append?

Ich übergebe den Namen einer Checkbox-Option in JQuery d3, um eine neue Registerkarte li Element mit dem gleichen Namen zu rendern.Wie erstellt man nur ein li-Element pro Aufruf von d3.append?

Aber was ich versuchte, indem ich den Optionsnamen übertrage, zB "Option1" erstellt eine neue Registerkarte für jeden Buchstaben in der Zeichenfolge unter Verwendung der .data(val) Option.

Also in meinem Beispiel unten val = "option1" und ich erstellen die Registerkarte wie folgt aus:

d3.select("ul#chartTabs") 
       .selectAll("li") 
       .data(val) 
       .enter() 
       .append('li') 
       .insert("a", ":first-child") 
       .attr("data-toggle", "tab") 
       .attr("id", function(val, i){ var result = val + i; return result; }) 
       .text(function(d){ return d; })

Frage:

Wie kann ich nur eine Registerkarte pro Anruf erstellen, um d3.append?

Dies ist der Stromausgang bei der Übergabe des Wertes "option1". Welches ist nicht wie erwartet, da es eine neue Registerkarte für jeden Buchstaben erstellt. Anstelle einer einzelnen Schaltfläche mit Wertoption1.

Quelle

2016-08-08 Brian J

ok das funktioniert, aber ich habe festgestellt, dass ein zweiter Aufruf dieses Codes die vorherige Schaltfläche "Option1" mit der neuen Schaltfläche "Option2" entfernt. Was ich suche ist, die neue Taste Option2 neben Option1 hinzuzufügen. Irgendwelche Ideen da? –

Sie vermissen den Punkt der Datenbindung. Wenn Sie mehrere li wünschen, sollten Sie nicht mehrere Anrufe tätigen. Nur ein Aufruf mit Daten wie '.data (['option1', 'option2'])'. – Mark

In diesem Anwendungsfall hat ein Benutzer eine Liste von Diagrammoptionen. Der Benutzer wählt eine Option aus, die eine neue Schaltfläche und ein neues Diagramm erstellt. Wenn Sie eine nachfolgende Option auswählen, wird eine weitere Schaltfläche und ein Diagramm hinzugefügt. Dies ermöglicht einem Benutzer, zwischen gerenderten Diagrammen zu wechseln. Anstatt alles in einem Zug zeichnen zu müssen. –

d3 Ihre String in ein Array ist Nötigung, könnten Sie einfach .data([val]), verwenden oder die Datenbindungs alle zusammen überspringen, da Sie nicht wirklich verwenden es:

d3.select("ul#chartTabs") 
    .append('li') 
    .insert("a", ":first-child") 
    .attr("data-toggle", "tab") 
    .attr("id", val + "0") 
    .text(val);

Wenn Sie wirklich wollen mehrere li, nicht diesen Code iterativ aufrufen, dann wollen Sie die Datenbindung.

Quelle

2016-08-08 14:42:49 Mark

Wie erstellt man nur ein li-Element pro Aufruf von d3.append?

Antwort

Verwandte Themen