D3.js Comment appliquer plusieurs classes lors de l'utilisation d'une fonction
Je suis actuellement à l'aide D3.js et suis tombé sur un problème que je n'arrive pas à résoudre.
J'ai un fichier CSV qui a une colonne nommée "Set" et une colonne nommée "Année". Je veux tirer les valeurs de ces colonnes et de les utiliser comme noms de classe. C'est ce que j'ai actuellement...
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", function(d) {
if (d["Set"] == 1)
{
return "set-1";
}
if (d["Set"] == 2)
{
return "set-2";
}
});
Cela fonctionne parfaitement bien et donne à chacun des points de données d'un nom de classe. Quand j'ai essayer la suite cependant, le "Set" les noms de classe sont plus écrits par les "An" les noms de classe.
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", function(d) {
if (d["Set"] == 1)
{
return "set-1";
}
if (d["Set"] == 2)
{
return "set-2";
}
.attr("class", function(d) {
if (d["Year"] == 2012)
{
return "2012";
}
if (d["Year"] == 2013)
{
return "2013;
}
});
Comment ce code peut être corrigé de manière à ce qu'il ajoute sur d'autres noms de classe, par opposition à écrire.
Espère que quelqu'un peut vous aider.
- Avez-vous envisagé d'utiliser jQuery? Il a une belle
addClass()
méthode. - Mais comment puis-je accéder à l' .CSV et de les appliquer à la classe de la correcte des données, les nœuds?
- Vous pouvez ajouter la classe après le chargement du fichier CSV?
Vous devez vous connecter pour publier un commentaire.
Vous voulez juste une seule fonction qui fait les deux choses ne sont pas vous. Quelque chose le long de ces lignes peut-être...
.attr("class", function(d) { "set-" + d["Set"] + " " + d["Year"] })
.return
là non..?Il existe une approche alternative qui peut être utile. Vous pouvez attribuer ou supprimer des classes à partir d'un élément à l'aide de
selection.classed('class-name', true)
ouselection.classed('class-name', false)
:Je préfère de cette façon parce que vous pouvez supprimer les classes à partir d'un élément en utilisant la même syntaxe.
classed
(au lieu deattr('class'...
est qu'il ne sera pas effacer d'autres classes déjà attribué à l'élément.Mise à jour
Semble, cette approche n'est plus acceptable D3.js v5+
Réponse originale à cette question
Vous pouvez également utiliser un hachage comme argument de
classed
fonction: