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!
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.