我在d3.js甘特图中有一个甘特图。我使用滚动和缩放甘特图:http://codepen.io/Pau/pen/FKzEaMouseevent div覆盖div上的div
但我有问题。这是我的修改: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。
的MouseEvent在线路和任务工作,当我在课堂上窗格改变:pointer-events: all;
到pointer-events: auto;
但这种改变后,我的缩放和滚动不行......
如何改变呢?我想放大滚动图表和鼠标事件在线和任务工作。我想我必须改变行类pointer-events属性。但是如何?
总结,更简单的例子。我有两节课。
<div class="A">
<div class="B">
</div">
</div">
这两个类都有mousevent,但是A类覆盖类B.如何设置这两个mousevents的工作?
非常感谢您的帮助。 –