Mouseevent div 在图表上覆盖 div
Mouseevent div cover div on chart
我在d3.js甘特图中有一个甘特图。我使用滚动和缩放甘特图:http://codepen.io/Pau/pen/FKzEa
但是我有问题。这是我的修改:http://codepen.io/anon/pen/pgVdgm 我想在用户鼠标悬停在行或任务上时添加鼠标事件(简单警报)。但这不起作用。我将此事件添加到行和任务中:
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() {
});
我认为问题出在添加矩形的这一行,class 窗格
chart.append("rect")
.attr("class", "pane")
.attr("width", width)
.attr("height", height-margin.top-margin.bottom)
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
css 中的窗格 class:
.pane {
fill: none;
pointer-events: all;
}
和这个 div 覆盖线和任务 mousevents。
当我在 class 窗格中更改时,鼠标事件和任务工作:pointer-events: all;
到 pointer-events: auto;
但是在这个改变之后,我的缩放和滚动不起作用...
怎么改?我想在线缩放滚动图表和鼠标事件,任务都可以。我想我必须更改行 class pointer-events 属性。但是怎么办?
总结,更简单的例子。我有两个 class.
<div class="A">
<div class="B">
</div">
</div">
两个class都有mousevent,但是class一个封面class B.如何设置两个mousevent都起作用?
对于第一次更改:
从 none
制作 fill
transparent
.pane {
cursor: move;
fill: transparent;
pointer-events: auto;
}
第二个改变使上面的矩形.gantt-chart
classgroup
像这样:
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
希望对您有所帮助!
我在d3.js甘特图中有一个甘特图。我使用滚动和缩放甘特图:http://codepen.io/Pau/pen/FKzEa
但是我有问题。这是我的修改:http://codepen.io/anon/pen/pgVdgm 我想在用户鼠标悬停在行或任务上时添加鼠标事件(简单警报)。但这不起作用。我将此事件添加到行和任务中:
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() {
});
我认为问题出在添加矩形的这一行,class 窗格
chart.append("rect")
.attr("class", "pane")
.attr("width", width)
.attr("height", height-margin.top-margin.bottom)
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
css 中的窗格 class:
.pane {
fill: none;
pointer-events: all;
}
和这个 div 覆盖线和任务 mousevents。
当我在 class 窗格中更改时,鼠标事件和任务工作:pointer-events: all;
到 pointer-events: auto;
但是在这个改变之后,我的缩放和滚动不起作用...
怎么改?我想在线缩放滚动图表和鼠标事件,任务都可以。我想我必须更改行 class pointer-events 属性。但是怎么办?
总结,更简单的例子。我有两个 class.
<div class="A">
<div class="B">
</div">
</div">
两个class都有mousevent,但是class一个封面class B.如何设置两个mousevent都起作用?
对于第一次更改:
从 none
fill
transparent
.pane {
cursor: move;
fill: transparent;
pointer-events: auto;
}
第二个改变使上面的矩形.gantt-chart
classgroup
像这样:
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
希望对您有所帮助!