CODEWITHSUNDEEP
d3.jssvgclick
Stack Diego
Stack Diego

Reputation: 1337

d3js, detect click above chart

I have a grouped column chart built with d3.js v4. When the user clicks on a single chart, the other ones will become less visible to highlight the clicked chart. Now I have an usability issue: when the chart is very short, it's a little bit too hard to click on it, so I'd like to detect the click on all the section above the chart.

function onSelectSingleBarChart(d, i, j) {...

Here is the jsfiddle.

Upvotes: 2

Views: 530

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

One way would be to

  • Add a transparent rectangle over each group chart so that it consumes the click.

  • On click of the transparent bar call the onSelectSingleBarChart just as you were doing on individual bar chart

    grp.append("rect") .attr("y", function(d) {return y(y.domain()[1]);}) .attr("width", x0.bandwidth()) .attr("height", y.domain()[1])//max domain .attr("fill", function(d) { return "transparent"; }) .on("click", onSelectSingleBarChart);

working code here

Upvotes: 2

Related Questions