Javascript d3:当鼠标事件连接到1000个节点时,UI延迟
我有一个用例,其中我有大约1000个DOM元素,所有这些元素都连接到mouseover和mouseout事件 这就是代码的样子Javascript d3:当鼠标事件连接到1000个节点时,UI延迟,javascript,jquery,d3.js,Javascript,Jquery,D3.js,我有一个用例,其中我有大约1000个DOM元素,所有这些元素都连接到mouseover和mouseout事件 这就是代码的样子 onMouseover(node, targetNode) { window.cancelAnimationFrame(this.mouseoutAnimationFrame); window.cancelAnimationFrame(this.mouseoverAnimationFrame); this.mous
onMouseover(node, targetNode) {
window.cancelAnimationFrame(this.mouseoutAnimationFrame);
window.cancelAnimationFrame(this.mouseoverAnimationFrame);
this.mouseoverAnimationFrame = window.requestAnimationFrame(function() {
svg.selectAll('use').classed('fadeOut', true);
svg.selectAll('line').classed('fadeOut', true);
svg.selectAll('text').classed('fadeOut', true);
d3.select(targetNode).classed('fadeOut', false);
d3.select(targetNode.nextElementSibling).classed('fadeOut', false);
...some more code
return this;
}
onMouseout(node, target) {
var svg = d3.select(target.ownerSVGElement);
this.mouseoutAnimationFrame = window.requestAnimationFrame(function() {
svg
.selectAll('use')
.classed('fadeOut', false)
.classed('fadeIn', true);
svg
.selectAll('text')
.classed('fadeOut', false)
.classed('fadeIn', true);
});
return this;
}
registerListernerWithDelay(ele, delay, mouseoverCb, mouseoutCb) {
var timeout = null;
var event;
ele.on('mouseover', function(d) {
event = d3.event;
timeout = setTimeout(function() {
mouseoverCb(d, event);
}, delay);
});
ele.on('mouseout', function(d) {
clearTimeout(timeout);
event = d3.event;
mouseoutCb(d, event);
});
}
// I tried adding 400ms delay..still facing same issue
this.registerListernerWithDelay(nodes, 400,
function mouseover(d, event) {
var target = event.target;
self.onMouseover(d, target);
},
function mouseout(d,event) {
var target = event.target;
self.onMouseout(d, target);
}
);
因此,每当我将鼠标悬停在元素上时,我会看到一条信息的轨迹被显示出来,理想情况下,这些信息应该在鼠标离开时被删除。请建议我如何克服这个错误。我也尝试过添加延迟,但仍然没有成功。您可以使用来解决此问题
不是每个DOM节点都有一个侦听器,而是在父节点上只使用一个侦听器。
然后,每当事件发生时,都要查找event.target
,以确定应该为哪个节点设置动画
示例实现,假设您具有以下html:
<svg id="parentNode">
<!-- All the interactive nodes are here... -->
</svg>
d3.selectAll('#parentNode') // this is only one item
.on('mouseover', function() {
var element = d3.select(d3.event.target)
// element is the DOM node with which you want to interact...
})
.on('mouseout', function() {
var element = d3.select(d3.event.target)
// [...]
})