4

Estoy usando la librería d3.js para crear una gráfica de barras, ya tengo la gráfica creada, la cual me compara las cantidades entre dos semanas de la siguiente manera:

introducir la descripción de la imagen aquí

Lo que quiero es agregar un ícono en cada grupo de barras un indicador de que aumentó o disminuyó según las variables de la siguiente manera:

introducir la descripción de la imagen aquí

No precisamente tiene que ser la misma iconografía o diseño, sólo quisiera tener una idea de como podría hacerlo, parte del código que uso para crear la gráfica es el siguiente:

//Aquí creo las coordenadas y las barras

svg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + height + ")")
              .call(xAxis);

svg.append("g")
              .attr("class", "y axis")
              .call(yAxis)
              .append("text")
              .attr("transform", "rotate(-90)")
              .attr("x", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Tallos Cortados");

var state = svg.selectAll(".state")
              .data(data)
              .enter()
              .append("g")
              .attr("class", "state")
              .attr("transform", function(d) { 
                return "translate(" + x0(d.nameData) + ",0)"; 
              });


state.selectAll("rect")
              .data(function(d) { 
                return d.quantities; 
              })
              .enter()
              .append("rect")
              .attr("x", function(d) { 
                return x1(d.name); 
              })
              .attr("width", x1.rangeBand())
              .attr("height", function(d) { 
                return height - y(d.value); 
              })
              .attr("y", function(d) { 
                return y(d.value); 
              })
              .style("fill", function(d) { 
                return color(d.name); 
              })
              .style("cursor", "pointer")
              .on('mouseover', tip.show)
              .on('mouseout', tip.hide);

Quisiera saber si existe algún ejemplo que me pueda asesorar como agregar estos íconos, estuve tratando de agregarlo pero no me funciona, he intentado lo siguiente:

state.append('text')
              .attr('font-family', 'FontAwesome')
              .attr("y", 0 - (margin.top / 10))
              .attr('font-size', function(d) { return d.size+'em'} )
              .text(function(d) { return '\uf118' });

Me da lo siguiente:

introducir la descripción de la imagen aquí

En este Jsfiddle, esta todo el código. Gracias por cualquier ayuda.

4
  • ¿Podrías crear un ejemplo mínimo, completo y verificable? Ahora mismo al código le falta el HTML/SVG (y algunas funciones JS) y no se puede ejecutar sin problemas. Sería más fácil ver una posible solución así
    – Alvaro Montoro
    Commented el 14 sept. 2016 a las 15:04
  • Claro que sí, he creado este Jsfiddle con el código que uso para crear la gráfica. @AlvaroMontoro Commented el 14 sept. 2016 a las 15:18
  • El JSFiddle no funciona, me da el error: "Uncaught TypeError: Cannot read property 'ordinal' of undefined"
    – Alvaro Montoro
    Commented el 14 sept. 2016 a las 15:22
  • Debe ser porque me falto agregar las librerías, ya lo actualicé Jsfiddle @AlvaroMontoro Commented el 14 sept. 2016 a las 15:29

1 respuesta 1

2

La verdad es que me ha costado un poco entender cómo funcionaba el código (soy bastante nuevo con d3.js), así que seguramente esta solución se pueda simplificar bastante (por ejemplo, quedándonos sólo con la diferencia y el valor, porque "name" es una constante)... pero aquí va:

state.selectAll(".state")
          .data(function(d) {
            return [{ "diff": (d.quantity1-d.quantity2), 
                      "name": "quantity2", 
                      "value": d.quantity2 }];
          })
          .enter()
          .append('text')
          .attr('font-family', 'FontAwesome')
          .attr("y", function(d) {
            return(  y(d.value) - 5 );
          })
          .attr("x", function(d) { 
            return x1(d.name); 
          })
          .attr('font-size', function(d) { 
            return d.size+'em'
          })
          .text(function(d) { 
            return d.diff > 0 ? "-" : "+"
          });

Esto es lo que hace:

  1. Para todos los grupos
  2. Selecciona los datos que nos interesan:

    • La diferencia entre quantity1 y quantity2 (que determinará el contenido del texto)
    • El valor del quantity2 (que determinará la altura a la que hay que poner el texto)
    • El valor del nombre del último quantity (esto podría no hacer falta)
  3. Añade un elemento de tipo text

  4. El atributo y se calcula a partir de la altura del segundo elemento (quantity2)
  5. El valor x se calcula a partir de la posición horizontal de la segunda barra (quantity2)
  6. El texto dependerá de la diferencia entre el primer valor y el segundo
    • Si es positivo, quiere decir que el primer valor es mayor, y se mostrará un -
    • Si es negativo, quiere decir que el segundo valor es mayor, y se mostrará un +

Y aquí está el código funcionando (he cambiado el valor de uno de los quantity2 para que se vea como en algunos casos es - y en otros +):

var data = [
{
"product":"ALSTROEMERIA","nameGroup":"EL TESORO","id":3,"week2":36,"week1":35,"quantity1":534000,"quantity2":367580
},
{"product":"ALSTROEMERIA","nameGroup":"LUISA MARIA","id":2,"week2":36,"week1":35,"quantity1":346100,"quantity2":396100
},{"product":"ALSTROEMERIA","nameGroup":"LUZAMA","id":1,"week2":36,"week1":35,"quantity1":336800,"quantity2":266500}];

    var margin    = {top: 25, right: 15, bottom: 50, left: 55},
    width         = 500 - margin.left - margin.right,
    height        = 250 - margin.top - margin.bottom;
    
    var x0        = d3.scale.ordinal()
            .rangeRoundBands([0, width], .5);
    
    var x1        = d3.scale.ordinal();
    
    var y         = d3.scale.linear()
            .range([height, 0]);
    
    for(var a in data){
      if(data[a].week2 === undefined){
        var color     = d3.scale.ordinal()
            .range(["#F7D4BA"]);
      }else{
        var color     = d3.scale.ordinal()
            .range(["#F39037", "#F7D4BA"]);
      }
    }
    
    var xAxis     = d3.svg.axis()
            .scale(x0)
            .orient("bottom");
    
    var yAxis     = d3.svg.axis()
            .scale(y)
            .orient("left");
    
    var tip       = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function(d) {
              return "<strong>Tallos Cortados:</strong><br><span style='font-size:12px;'>" + d.value + "</span>";
            });
            
    var svg       = d3.select(".dashboard")
            .append("div")
            .attr("class", "col-lg-6")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    svg.call(tip);
    
    var dataNames = d3.keys(data[0]).filter(function(key) { 
      return key !== "nameGroup" && key !== "week1"  && key !== "week2" && key !== "product" && key !== "year" && key !== "id"; 
    });
    
    data.forEach(function(d) {
      d.quantities = dataNames.map(function(name) { 
        return {name: name, value: +d[name]}; 
      });
    });
    
    x0.domain(data.map(function(d) { 
      return d.nameGroup; 
    }));
    
    x1.domain(dataNames).rangeRoundBands([0, x0.rangeBand()]);
    
    y.domain([0, d3.max(data, function(d) { 
      return d3.max(d.quantities, function(d) { 
        return d.value; 
      }); 
    })]);
  
    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
    
    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("x", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Tallos Cortados");
    
    var state = svg.selectAll(".state")
            .data(data)
            .enter()
            .append("g")
            .attr("class", "state")
            .attr("transform", function(d) { 
              return "translate(" + x0(d.nameGroup) + ",0)"; 
            });
            
    state.selectAll("rect")
            .data(function(d) { 
              return d.quantities; 
            })
            .enter()
            .append("rect")
            .attr("x", function(d) { 
              return x1(d.name); 
            })
            .attr("width", x1.rangeBand())
            .attr("height", function(d) { 
              return height - y(d.value); 
            })
            .attr("y", function(d) { 
              return y(d.value); 
            })
            .style("fill", function(d) { 
              return color(d.name); 
            })
            .style("cursor", "pointer")
            //.on("click", updateBar)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);
            
    state.selectAll(".state")
              .data(function(d) {
              	return [{ "diff": (d.quantity1-d.quantity2), 
                          "name": "quantity2", 
                          "value": d.quantity2 }];
              })
              .enter()
              .append('text')
              .attr('font-family', 'FontAwesome')
              .attr("y", function(d) {
              	return(  y(d.value) - 5 );
              })
              .attr("x", function(d) { 
                return x1(d.name); 
              })
              .attr('font-size', function(d) { return d.size+'em'} )
              .text(function(d) { 
              	return d.diff > 0 ? "-" : "+"
              });

		var weeks = [];
    for(var i in data){
      if(data[i].week2 === undefined){
        weeks.push("Semana "+data[i].week1);
      }else{
        weeks.push(
                "Semana "+data[i].week1, 
                "Semana "+data[i].week2
        );
      }
    } 
    
    weeks       = $.unique(weeks);
    var legend  = svg.selectAll(".legend")
            .data(weeks.slice())
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) { 
              return "translate(0," + i * 20 + ")"; 
            });
            
    legend.append("rect")
            .attr("x", width - 1)
            .attr("width", 10)
            .attr("height", 10)
            .style("fill", color);
    
    legend.append("text")
            .attr("x", width - 6)
            .attr("y", 5)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function(d) { 
              return d; 
            });
.axis path,
.axis line {
  fill: none;
  stroke: #B5B5B5;
  shape-rendering: crispEdges;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 7px;
  background: #E6E6E6;
  color: #000;
  border-radius: 2px;
  text-align: center;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.d3-tip:after {
  border: solid 13px transparent;
  border-top-color: #E6E6E6;
  border-bottom: 0;
  bottom: -18px;
  content: "";
  display: block;
  height: 0;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 0;
}
.title{
  font-size: 13px;
  font-weight: 700;
  color: #676767;
}
.legend{
  color: #676767
}
<script src="//code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<section class="content">
  <div class="col-lg-12">
    <div class="dashboard"></div>
  </div>
</section>

Faltaría cambiar el - por una flecha roja hacia abajo, y el + por una flecha verde hacia arriba.

4
  • 1
    Mi aporte, el código para flecha arriba y abajo es unicode f062 y f063, si quieres hacerlo con chevron es f077 y f078
    – devconcept
    Commented el 15 sept. 2016 a las 12:51
  • Muchas gracias, mas o menos tenía la idea porque también soy nuevo en d3.js :) Commented el 15 sept. 2016 a las 14:27
  • 1
    En el Snippet sale este error al pasar el mouse en las barras: "message": "Uncaught TypeError: d.value.formatNumber is not a function", "lineno": 100, "colno": 102.
    – user13558
    Commented el 8 nov. 2016 a las 3:59
  • 1
    @ArtEze Gracias por comprobarlo. El problema ocurría porque estaba usando una función que no estaba definida. Ya he corregido el fallo.
    – Alvaro Montoro
    Commented el 8 nov. 2016 a las 4:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.