D3 Chart Legend, Bars not appearing

Question

I cannot seem to get the Bars series to appear in the legend on my chart. Both line charts appear in the Legend OK. I have a JSFiddle here.

I then want to allow the user to click on individual legends and have these lines / bars appear/disappear from the chart as a transition, but have not found any examples of this other than NVD3.js, which I do not want to use. Could you point me to an example you may know of so I can learn from it.

Please click on the "Create Chart button first, so you can see the chart generated.

HTML code is:

<input id="clickMe1" type="button" value="Create Chart" onclick='createMainPerfChart()' />
<input id="clickMe2" type="button" value="Update Chart" onclick='updateMainPerfChart()' />
<div id="msg"></div>
<div style="margin-top:120px;">
    <svg id="mainchart"></svg>
</div>

Thank you!

Lars Kotthoff Lars Kotthoff · Accepted Answer · 2014-01-22T09:35:06

You need to modify the implementation of the legend for this. Specifically, you need to attach a click handler that, based on which circle is clicked, fades out the bars and the other line. The following code achieves this.

.on("click", function(d) {
                var op = d.hidden ? 1 : 0;
                d3.selectAll("rect.bar").transition().attr("opacity", op);
                if(d.key == "Cumulative Output") {
                    d3.select("path.TGTLine").transition().attr("opacity", op);
                } else {
                    d3.select("path.CABLine").transition().attr("opacity", op);
                }
                d.hidden = !d.hidden;
            });

I'm storing the current state in .hidden here to know whether to fade in or fade out. Complete example here.

D3 Chart Legend, Bars not appearing

1 Answers