web-dev-qa-db-fra.com

D3.js Comment appliquer plusieurs classes lors de l'utilisation d'une fonction

J'utilise actuellement D3.js et j'ai rencontré un problème que je n'arrive pas à résoudre.

J'ai un CSV qui a une colonne nommée "Set" et une colonne nommée "Year". Je veux extraire les valeurs de ces colonnes et 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 et donne à chaque point de données un nom de classe. Cependant, lorsque j'essaie ce qui suit, les noms de classe "Set" sont remplacés par les noms de classe "Year".

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-il être rectifié pour qu'il ajoute des noms de classe supplémentaires au lieu de les écraser.

J'espère que quelqu'un pourra vous aider.

javascripthtmlcsssvgd3.js
22
Dally

Vous voulez juste une seule fonction qui fait les deux choses, n'est-ce pas. Quelque chose dans ce sens peut-être ...

var circle = svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", function(d) {
            var c = "";
            if (d["Set"] == 1)
            {
                c = "set-1";
            }
            if (d["Set"] == 2)
            {
                c = "set-2";
            }
            if (d["Year"] == 2012)
            {
                c += " 2012";
            }
            if (d["Year"] == 2013)
            {
                c += " 2013;
            }
            return c;
        });
15
Robert Longson

Il existe une approche alternative qui peut être utile. Vous pouvez affecter ou supprimer des classes d'un élément à l'aide de selection.classed('class-name', true) ou selection.classed('class-name', false):

var circle = svg.selectAll("circle")
    .data(data)
    .enter()
    .append('circle')
    .classed('2012', function(d) { return d['Year'] === 2012; })
    .classed('2013', function(d) { return d['Year'] === 2013; })
    .classed('set-1', function(d) { return d['Set'] === 1; })
    .classed('set-2', function(d) { return d['Set'] === 2; });

Je préfère cette méthode car vous pouvez supprimer les classes d'un élément en utilisant la même syntaxe.

62
Pablo Navarro

Mettre à jour

Il semble que cette approche ne soit plus acceptable pour D3.js v5 +

Réponse originale

Vous pouvez également utiliser un hachage comme argument de la fonction classed:

var circle = svg.selectAll("circle")
  .data(data)
  .enter()
  .append('circle')
  .classed({
    '2012': function(d) { return d['Year'] === 2012; },
    '2013': function(d) { return d['Year'] === 2013; },
    'set-1': function(d) { return d['Set'] === 1; },
    'set-2': function(d) { return d['Set'] === 2; }
  });
18
Ivan Black