Witam. Mam problem z mouseventem wykonywanym na niższej warstwie div. Tworzę wykres w JSie z użyciem d3.js, wykres typu gantt chart. Wykres ma mieć opcję zoomu oraz scrollowania. Wzoruję się na przykładzie tutaj: http://codepen.io/Pau/pen/FKzEa

Moja modyfikacja dodaje pionową czerwoną linię. Po najechaniu na tą linię powinien być wywoływany event myszy, w moim przykładzie jest to prosty alert, tak samo powinno dziać się po najechaniu na dodane zadanie. Dodałem eventy zarówno do linii jak i taska:

Moja wersja wykresu z linią: http://codepen.io/anon/pen/pgVdgm
Linia:

    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() {

      }); 

Zadanie:

    svg.selectAll(".chart")
      .data(tasks, keyFunction).enter()
      .append("rect")
        .attr("rx", 5)
        .attr("ry", 5)
        .attr("class", function(d){ return 
    tatus[d.status] || "bar"; }) 
        .attr("y", 0)
        .attr("transform", rectTransform)
        .attr("height", function(d) { return 5; }) // y.rangeBand(); })
        .attr("width", function(d) { return (x(d.endDate) - x(d.startDate)); })
        .attr("clip-path", "url(#clip)")
    .on('mouseover', function(d) {
        alert("abcd");
            }); 

Niestety oba eventy nie reagują po najechaniu. Doszedłem, że problemem jest tutaj klasa pane, prostokąta, który tak jakby nakłada się na cały wykres i przykrywa resztę elementów. Niestety bez tej klasy nie działa ani scroll ani zoom.:

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

Klasa pane w css:

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

Domyślne ustawienie pointer-events na all powoduje działanie zooma i scrolla na wykres, ale nie działa zdarzenie po najechaniu na linię i zadania. Po zmianie np. na auto scroll i zoom nie działają, za to zdarzenia po najechaniu na linię czy zadanie wykonują się.

Jak zrobić żeby zarówno działały obie rzeczy? Przypuszczam, że problemem jest nakładanie się jednej warstwy na drugą. Taki jakby div na divie i oba mają zdarzenia myszy.