d3 fügt mehrere Klassen mit Funktion hinzu

Habe ich die svg-Grafiken:

<g class="user" title="Michael" rel="tooltip" transform = "rotate(-12.364052661705784)translate(360)" style="fill: #9467bd; "></g>

Möchte ich hinzufügen, dass eine Klasse wie die gleiche wie Titel. Ich habe versucht,

d3.selectAll('.user').attr('class','Michael');

Aber es ersetzt die ursprüngliche Klasse. Dann habe ich versucht

d3.selectAll('.user').classed('Michael',true);

Es funktioniert! Aber jetzt möchte ich zu dem zurückkehren der name der Klasse mit einer Funktion wie

d3.selectAll('.user').classed(function(){return this.attr('title');},true);

Funktioniert es nicht. Wie kann ich das tun?

Dank

InformationsquelleAutor der Frage Yujun Wu | 2012-11-02

  1. 53

    Können Sie die Zuweisung mehrerer Klassen, um Elemente, indem Sie einfach die Ihren Namen mit Leerzeichen:

    d3.selectAll(".user").attr("class", "user Michael");

    Aber es scheint, dass das, was Sie wirklich brauchen, ist die Zuordnung eines data-Eigenschaft, um Ihre Elemente, für die ist es viel besser, das HTML5 data - Attribute. So konnte man tun:

    d3.selectAll(".user").attr("data-name", function(d,i) { return "Michael #" + i; });

    und später um den Namen eines Benutzers:

    d3.select(".user").attr("data-name")

    InformationsquelleAutor der Antwort Ilya Boyandin

  2. 4

    warum die Verwendung von HTML5-data-Attribute, duplizieren von Daten, die bereits vorhanden ist, in das title-Attribut? HTML5 data-Attribute sind sicher nützlich, aber das duplizieren von Daten ist nicht eine gute Sache.

    Es ist leicht, es zu tun, ohne die Duplizierung der Daten, die Nähe zu dem, was Sie im Sinn hatte, ursprünglich.

    d3.selectAll('.user').each(
    function(){
        var elt = d3.select(this);
        elt.classed(elt.attr("title"), true);
    }
)

    InformationsquelleAutor der Antwort mathheadinclouds

Schreibe einen Kommentar