web-dev-qa-db-fra.com

d3 ajouter plusieurs classes avec fonction

J'ai le svg comme:

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

Je veux ajouter une classe identique au titre. j'ai essayé

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

Mais il a remplacé la classe d'origine. J'ai essayé

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

Ça marche! Mais maintenant, je veux retourner le nom de la classe avec une fonction comme

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

Ça ne marche pas. Comment puis je faire ça?

Merci

javascriptjqueryd3.js
33
Yujun Wu

Vous pouvez affecter plusieurs classes aux éléments en séparant simplement leurs noms par des espaces:

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

Mais il semble que ce dont vous avez vraiment besoin, c'est d'attribuer une propriété de données à vos éléments pour lesquels il est préférable d'utiliser les HTML5 data- attributes . Vous pourriez donc faire:

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

et plus tard pour obtenir le nom d'un utilisateur:

d3.select(".user").attr("data-name")
65
Ilya Boyandin

pourquoi utiliser des attributs de données HTML5, dupliquer des données déjà présentes dans l'attribut title? Les attributs de données HTML5 sont certes utiles, mais la duplication de données n'est pas une bonne chose.

Il est facile de le faire sans duplication des données, étant proche de ce que vous aviez à l'esprit à l'origine.

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

Si vous voulez simplement ajouter une classe, vous pouvez sauter de d3 et utiliser la liste des classes:

d3.selectAll('.user').node().classList.add("mynewclass");

Peut ne pas fonctionner dans les navigateurs très anciens.

0
user2728841