Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript d3:当鼠标事件连接到1000个节点时,UI延迟_Javascript_Jquery_D3.js - Fatal编程技术网

Javascript d3:当鼠标事件连接到1000个节点时,UI延迟

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

我有一个用例,其中我有大约1000个DOM元素,所有这些元素都连接到mouseover和mouseout事件

这就是代码的样子

    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)
        // [...]
    })