d3 fügen Sie mehrere Klassen mit Funktion

Question

Ich habe das svg wie:

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

ich eine Klasse als die selben wie Titel hinzufügen möchten. Ich versuchte

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

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

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

Es funktioniert! Aber jetzt möchte ich den Klassennamen mit einer Funktion wie

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

zurückgeben Es funktioniert nicht. Wie kann ich das machen?

Dank

Answer 1

Sie können durch einfaches Trennen ihre Namen mit Leerzeichen mehreren Klassen zu den Elementen zuordnen:

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

Aber es scheint, dass das, was Sie wirklich, für die eine Dateneigenschaft auf Ihre Elemente zuweisen müssen, ist es ist viel besser, die HTML5 data- attributes zu verwenden. So könnten Sie tun:

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

und später den Namen eines Benutzers zu erhalten:

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

Answer 2

warum verwenden HTML5 Datenattribute, Duplizieren von Daten, die bereits dort ist im Titel-Attribut? HTML5-Datenattribute sind zwar nützlich, aber das Duplizieren von Daten ist keine gute Sache.

Es ist einfach, dies ohne Datenduplizierung zu tun, da es dem entspricht, was Sie ursprünglich vorhatten.

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