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