javascript - d3 : UI lags when mouse events attached to 1000 nodes

Question

我有一个用例，我有大约 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);
            }
        );

所以每当我悬停到元素时..我会看到显示信息的踪迹，理想情况下应该在鼠标移出时将其删除。请建议我如何克服这个错误。我也尝试添加延迟，仍然没有成功。

Answer 1

您可以使用 event delegation解决这个问题。

您不必为每个 DOM 节点设置一个监听器，而只需在父节点上使用一个监听器。然后，无论事件何时发生，您都可以查找 event.target 以确定应该为哪个节点设置动画。

示例实现，假设您有以下 html:

<svg id="parentNode">
    <!-- All the interactive nodes are here... -->
</svg>

然后这个 javascript 就可以了:

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