unable to change legend symbol nvd3 bubble chart

Question

In my nvd3 bubble chart, each group of points has a different symbol but the legend has all as circles. The code is here. I have only come across this

.showLegend(false)

which enables to hide or show the legend. I am unable to understand how to change the symbols in the legend.

Answer 1

nvd3 does not give you direct access to the internals of the legend. However, you can alter it fairly easily using d3 selections to manipulate its various parts.

Start by creating a selection of all elements with class nv-series. This class represents a single group in the legend, holding both the circle symbol and the text (in your case 'Group0', 'Group1' etc). This returns an array, and the first element (index 0) is an array of all the elements:

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

Next, use the Array.forEach() function to iterate over this array, and for each element, replace the circle element with the appropriate symbol, matching the fill color to the circle that was removed.

In order to do this you also need to reuse the list of symbols that you made earlier, and iterate through them as well so that the correct symbol is assigned to each group. Here is one way to accomplish that, though perhaps you can think of an easier way:

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

Here is the updated JSFiddle.

---

===== EDIT =====

I've been going through the nvd3 codebase a bit, and there's a much simpler way to trigger the legend symbol to unfill when it is deactivated. It can simply be targeted in your css, since the series is given a class of disabled when it is disabled.

If you add the following css...

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

...then you can remove all of the hacky JavaScript click handling. It's much cleaner, and it's actually the way they handle it when using the default circle element.

Here's the updated JSFiddle.