Javascript 图上的Mouseevent div盖div
我在d3.js甘特图中有一个甘特图。我使用滚动和缩放甘特图: 但我有问题。这是我的修改:我想添加mouseevent(简单警报),当用户鼠标悬停在行或任务上时。但这不起作用。我将此事件添加到行和任务中:Javascript 图上的Mouseevent div盖div,javascript,d3.js,mouseevent,gantt-chart,Javascript,D3.js,Mouseevent,Gantt Chart,我在d3.js甘特图中有一个甘特图。我使用滚动和缩放甘特图: 但我有问题。这是我的修改:我想添加mouseevent(简单警报),当用户鼠标悬停在行或任务上时。但这不起作用。我将此事件添加到行和任务中: svg.select(".gantt-chart-canvas").append("line").attr( { "class":"verticalDeadLine", "x1" : x(testDate),
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() {
});
我认为问题在于这一行添加了rect,类窗格
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;
}
这个部门涵盖了行和事件
当我在类窗格中更改时,行上的Mouseevent和任务工作:指针事件:全部代码>到指针事件:自动代码>
但在这项更改之后,我的缩放和滚动不起作用
如何改变它?我想在图表上缩放滚动,并在行上移动事件和任务。我想我必须更改line类指针事件属性。但是怎么做呢
总结,更简单的例子。我有两节课
<div class="A">
<div class="B">
</div">
</div">
这两个类都有mousevent,但A类包含B类。如何设置这两个mousevents工作?对于第一个更改:
从none
.pane {
cursor: move;
fill: transparent;
pointer-events: auto;
}
第二个更改是在上方创建矩形。甘特图
类组
像这样:
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 + ")");
工作代码
希望这有帮助