d3.js - multibarchart - nvd3 live

no se puede cambiar el símbolo de leyenda gráfico de burbujas nvd3

Question

En mi tabla de burbujas nvd3, cada grupo de puntos tiene un símbolo diferente, pero la leyenda tiene todos los círculos. El código está aquí . Solo me he encontrado con esto

.showLegend(false)

que permite ocultar o mostrar la leyenda. No puedo entender cómo cambiar los símbolos en la leyenda.

Answer 1

nvd3 no le da acceso directo a las partes internas de la leyenda. Sin embargo, puede modificarlo bastante fácilmente utilizando las selecciones d3 para manipular sus diversas partes.

Comience creando una selección de todos los elementos con la clase nv-series . Esta clase representa un solo grupo en la leyenda, que contiene tanto el símbolo del círculo como el texto (en su caso ''Grupo 0'', ''Grupo 1'', etc.). Esto devuelve una matriz, y el primer elemento (índice 0) es una matriz de todos los elementos:

// all `g` elements with class nv-series
d3.selectAll(''.nv-series'')[0]

Luego, use la función Array.forEach() para iterar sobre esta matriz, y para cada elemento, reemplace el elemento del círculo con el símbolo apropiado, haciendo coincidir el color de relleno con el círculo que se eliminó.

Para hacer esto, también necesita reutilizar la lista de símbolos que hizo anteriormente, y repetirlos también para que se asigne el símbolo correcto a cada grupo. Aquí hay una manera de lograr eso, aunque quizás se te ocurra una manera más fácil:

// reuse the order of shapes
var shapes = [''circle'', ''cross'', ''triangle-up'', ''triangle-down'', ''diamond'', ''square''];
// loop through the legend groups
d3.selectAll(''.nv-series'')[0].forEach(function(d,i) {
  // select the individual group element
  var group = d3.select(d);
  // create another selection for the circle within the group
  var circle = group.select(''circle'');
  // grab the color used for the circle
  var color = circle.style(''fill'');
  // remove the circle
  circle.remove();
  // replace the circle with a path
  group.append(''path'')
    // match the path data to the appropriate symbol
    .attr(''d'', d3.svg.symbol().type(shapes[i]))
    // make sure the fill color matches the original circle
    .style(''fill'', color);
});

Aquí está el JSFiddle actualizado.

===== EDITAR =====

He estado revisando un poco la base de código nvd3, y hay una forma mucho más simple de activar el símbolo de leyenda para que se desactive cuando se desactiva. Simplemente puede ser objetivo en su CSS, ya que la serie recibe una clase de disabled cuando está desactivada.

Si agrega el siguiente css ...

.nv-series.disabled path {
    fill-opacity: 0;
}

... entonces puedes eliminar todo el hacky JavaScript click handling. Es mucho más limpio, y en realidad es la forma en que lo manejan cuando se usa el elemento de círculo predeterminado.

Aquí está el JSFiddle actualizado.