Mouseevent div 覆盖图表上的 div答案

【问题标题】：Mouseevent div cover div on chartMouseevent div 覆盖图表上的 div
【发布时间】：2016-02-01 07:30:55
【问题描述】：

我在 d3.js 甘特图中有一个甘特图。我使用滚动和缩放甘特图：http://codepen.io/Pau/pen/FKzEa

但是我有问题。这是我的修改：http://codepen.io/anon/pen/pgVdgm 当用户将鼠标悬停在行或任务上时，我想添加 mouseevent（简单警报）。但这不起作用。我将此事件添加到行和任务中：

        svg.select(".gantt-chart-canvas").append("line").attr(
          {
          "class":"verticalDeadLine",
          "x1" : x(testDate),
          "y1" : 0,
          "x2" : x(testDate),
          "y2" : height,
          "fill" : "none",
          "shape-rendering" : "crispEdges",
          "stroke" : "red",
          "z-index" : "550",
          "stroke-width" : "2px"
      }).on('mouseover', function(event) {
            alert("abcd");
        })
        .on('mouseout', function() {

      });

我认为问题出在添加矩形、类窗格的这一行

chart.append("rect")
    .attr("class", "pane")
    .attr("width", width)
    .attr("height", height-margin.top-margin.bottom)
    .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

css 类中的窗格：

.pane {
  fill: none;
  pointer-events: all;
}

这个 div 覆盖了行和任务 mousevents。

当我在类窗格中更改时，鼠标事件超过线和任务工作：pointer-events: all; 到 pointer-events: auto;

但在此更改之后，我的缩放和滚动不起作用...

如何改变它？我想在图表和鼠标事件上缩放滚动，并且任务都可以工作。我想我必须更改行类指针事件属性。但是怎么做呢？

总结，更简单的例子。我有两节课。

<div class="A">
    <div class="B">
    </div">
</div">

两个类都有mousevent，但是A类覆盖了B类。如何设置两个mousevents都工作？

【问题讨论】：

标签： javascript d3.js mouseevent gantt-chart

【解决方案1】：

对于第一个更改：

从none 制作fill transparent

.pane {
  cursor: move;
  fill: transparent;
  pointer-events: auto;
}

第二次更改使.gantt-chart上方的矩形类group

像这样：

var chart = d3.select("body")
                  .append("svg")
                    .attr("class", "chart")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom);
var drw = chart.append("rect")
        .attr("class", "pane")
        .attr("width", width)
        .attr("height", height-margin.top-margin.bottom)
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
 //now append ganttchart group
var svg = chart.append("g")
                    .attr("class", "gantt-chart")
                    .attr("width", width)
                    .attr("height", height-margin.top-margin.bottom)
                    .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

工作代码here

希望这会有所帮助！

【讨论】：