d3 adicionar várias classes com função

tenho o svg como: 

<g class="user" title="Michael" rel="tooltip" transform = "rotate(-12.364052661705784)translate(360)" style="fill: #9467bd; "></g>
Quero adicionar uma classe igual ao título. Eu tentei. 
d3.selectAll('.user').attr('class','Michael');

mas substituiu a classe original. Depois tentei. 

d3.selectAll('.user').classed('Michael',true);
Funciona! Mas agora quero devolver o nome da classe com uma função como 

d3.selectAll('.user').classed(function(){return this.attr('title');},true);
Não funciona. Como posso fazer isso?

Obrigado.
Author: Yujun Wu, 2012-11-02
Source

2 answers

Pode atribuir várias classes A elementos separando simplesmente os seus nomes com espaços: 

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

Mas parece que o que você realmente precisa é atribuir uma propriedade de dados aos seus elementos para os quais é muito melhor usar os HTML5 data - atributos. Então você poderia fazer: 

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

E mais tarde para obter o nome de um utilizador: 

d3.select(".user").attr("data-name")
 59
Author: Ilya Boyandin, 2012-11-05 17:12:16

Porquê usar atributos de dados HTML5, duplicando dados que já existem no atributo title? Atributos de dados HTML5 certamente são úteis, mas duplicar dados não é uma coisa boa.

É fácil fazê-lo sem duplicação de dados, estando perto do que tinha em mente originalmente. 
d3.selectAll('.user').each(
    function(){
        var elt = d3.select(this);
        elt.classed(elt.attr("title"), true);
    }
)
 6
Author: mathheadinclouds, 2014-09-24 17:24:30