Dc.js diagram toggle diagram
Is there a way to toggle charts on / off in a stacked chart ?
If I hover over a Legend the corresponding diagram is highlighted, but it would be nice if we could choose which ones to show (hide / show with legend, checkboxes, etc.).
I found a link to hideStack , but I don't think this is what I need.
Any ideas?
(Current DC version: 2.0.0-alpha.2 )
source to share
You are correct, legend switching is currently focused on stacks rather than subgrams of a stacked chart.
It might be possible to hack the legend toggle system, but here's a solution that simply adds the toggle functionality as an extension.
We'll just wait until the chart is drawn with an event pretransition
, and then add our own click handler to each of the legend items. This will use the index of the legend item to create a selector for the corresponding subheading, and then toggle its css visibility:
composite.on('pretransition.hideshow', function(chart) {
chart.selectAll('g.dc-legend .dc-legend-item')
.on('click.hideshow', function(d, i) {
var subchart = chart.select('g.sub._' + i);
var visible = subchart.style('visibility') !== 'hidden';
subchart.style('visibility', function() {
return visible ? 'hidden' : 'visible';
});
d3.select(this).style('opacity', visible ? 0.2 : 1);
});
});
In addition, we will make the legend element semi-transparent to indicate that the element is hidden.
source to share