Better method for toggling series visibility [solution provided]

[agk23]

The issue with the current example on how to toggle legend visibility is that it orphans the legend object and the chart will no longer control it on resize. For example you can't combine the "interactive legend" and "responsive resizing" demos as the legend won't move, even if it falls off the canvas or in the middle of the chart. I haven't thoroughly tested it, but this proxy works in my use case. Basically I just re-apply the event listener each time the legend is drawn.

...
legend = dimpleChart.addLegend("-100px", "30px", "100px", "-70px");
...
dimpleChart.draw();

proxiedDraw = legend._draw;
legend._draw = function () {
    var y;
    y = proxiedDraw.apply(this, arguments);
    this.shapes.selectAll('rect')
        .on('click', function (e) {
            var active, newOpacity, cls;
            active = e.active ? false : true;
            newOpacity = active ? 0 : 1;
            cls = e.key.toLowerCase().replace(' ', '-');
            //Hide or show the elements;
            svg.selectAll('path.dimple-' + cls).style('opacity', newOpacity);
            svg.selectAll('g.dimple-' + cls).style('opacity', newOpacity / 2.0 + 0.5);
            // Update whether or not the elements are active
            e.active = active;
        });
    return y;
};

It'd be nice if the legend had a property of "eventListeners: []" where people could add events to it and then the last thing the draw method does is execute each function in the array.

It'd also be nice if this functionality was native to dimple, because its such a great library but this is a pretty common requirement.

[schulzetenberg]

@agk23 Could you please provide a complete example? I would like to incorporate this functionality into my charts but I am having trouble seeing how your code fits in.