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.
30
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