Actualmente estoy usando D3.js y se ha topado con un problema que me parece que no puede resolver.

Tengo un CSV que tiene una columna llamada «Set» y una columna denominada «Año». Quiero tirar de los valores de estas columnas y el uso de ellos como los 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 da a cada uno de los puntos de datos de un nombre de clase. Cuando me pruebe el siguiente sin embargo, el «Conjunto» de los nombres de las clases son a través de escrito por el «Año» de nombres de la clase.

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 puede este código se puede rectificar lo que se añade adicional sobre los nombres de clase frente a la sobre-escritura de ellos.

Espero que alguien pueda ayudar.

  • Ha considerado el uso de jQuery? Tiene un bonito addClass() método.
  • Pero, ¿cómo puedo acceder a el .CSV y aplicar la clase correcta de los datos de los nodos?
  • Puedes añadir la clase después de la carga en el archivo CSV?
InformationsquelleAutor Dally | 2013-04-19

3 Comentarios

  1. 15

    Lo que desea es una función única que hace ambas cosas a la vez no. Algo a lo largo de estas líneas tal vez…

    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;
            });
    • Usted señor es un absoluto genio y me ha salvado de una buena cantidad de tiempo.
    • También se pueden concatenar directamente: .attr("class", function(d) { "set-" + d["Set"] + " " + d["Year"] }).
    • Pienso que se necesita un return allí no..?
    • Sí, no se puede editar más por desgracia.
    • no me gusta este diy. Mucho mejor el OO enfoque de Pablo y @Ivan
  2. 62

    Hay un enfoque alternativo que puede ser útil. Puede asignar o quitar 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; });

    Yo prefiero esta porque puede quitar las clases de un elemento usando la misma sintaxis.

    • muy bonita respuesta! Me gusta la sugerencia de utilizar el smart D3 clasificado() método. +1!
    • incluso una mejor razón para usar classed (en lugar de attr('class'... es que no hay otras clases que ya está asignado al elemento.
    • ¿Qué tal el rendimiento?
  3. 18

    Actualización

    Parece, este enfoque ya no es aceptable D3.js v5+

    Respuesta Original

    También puede utilizar un hash como argumento de classed función:

    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; }
      });
    • de esta manera es realmente útil y eficiente!!!
    • Esta es elegante, pero no funciona en D3 v5.

Dejar respuesta

Please enter your comment!
Please enter your name here