d3js，检测点击以上图表

Question

我有一个用d3.js v4构建的分组柱形图。当用户点击一张图表时，其他图标将变得不太明显，突出显示点击的图表。现在我遇到了一个可用性问题：当图表很短时，点击它很难，所以我想检测图表上方所有部分的点击。

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

这里是jsfiddle。

Answer 1

一种方法是

• 添加一个透明的矩形对每个组的图表，以便它占用的点击。

• 在透明条的点击呼叫onSelectSingleBarChart就像你正在做单独的线图上

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

工作代码here