javascript - puede - D3.js Cómo aplicar múltiples clases cuando se usa una función

plastico para envolver alimentos como se llama

Question

Actualmente estoy usando D3.js y me he encontrado con un problema que parece que no puedo resolver.

Tengo un CSV que tiene una columna llamada "Establecer" y una columna llamada "Año". Quiero extraer los valores de estas columnas y usarlos como nombres de clase. Esto es lo que tengo actualmente ...

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";
                }
            });

Esto funciona perfectamente bien y le da a cada punto de datos un nombre de clase. Sin embargo, cuando intento lo siguiente, los nombres de las clases "Establecer" están sobreescritos por los nombres de clase del "Año".

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;
                }
            });

¿Cómo se puede rectificar este código para que agregue nombres de clase adicionales en lugar de sobreescribirlos?

Espero que alguien pueda ayudar.

Answer 1

Hay un enfoque alternativo que puede ser útil. Puede asignar o eliminar clases de un elemento usando selection.classed(''class-name'', true) o 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; });

Lo prefiero porque puede eliminar las clases de un elemento con la misma sintaxis.

Answer 2

Solo quieres una sola función que haga ambas cosas, ¿no? Algo en esta línea quizás ...

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;
        });

Answer 3

También puede usar un hash como argumento de la función 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; }
  });