d3js, erkennen klicken über Diagramm

Question

Ich habe eine gruppierte Säulendiagramm mit d3.js v4 gebaut. Wenn der Benutzer auf ein einzelnes Diagramm klickt, werden die anderen weniger sichtbar, um das angeklickte Diagramm hervorzuheben. Jetzt habe ich ein Usability-Problem: Wenn das Diagramm sehr kurz ist, ist es ein bisschen zu schwierig, darauf zu klicken, also möchte ich den Klick auf den gesamten Bereich oberhalb des Diagramms erkennen.

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

Hier ist die jsfiddle.

Answer 1

Eine Möglichkeit wäre,

• ein transparentes Rechteck über jede Gruppe Diagramm hinzufügen, so dass es den Klick verbraucht.

• Bei Klick auf die transparente bar rufen Sie die onSelectSingleBarChart genauso wie

  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);

Arbeits Code here

auf einzelne Balkendiagramm taten