为什么这个 d3 代码运行会有几秒钟的延迟？答案

【问题标题】：Why is there a multi-second delay in this d3 code running?为什么这个 d3 代码运行会有几秒钟的延迟？
【发布时间】：2019-11-20 21:39:50
【问题描述】：

我将一组<span> 元素添加到<div> 中，并且当我将鼠标悬停在它们上时想要一个弹出窗口。

我的代码可以工作，但是在 DOM 完成和鼠标事件被处理之间有 5 秒（或更多）的延迟。（Chrome 上的 d3 v3）：

var popup=d3.select("body")
   .append("div")
   .attr("class","popup")
   .style("opacity",0)
   .style("overflow","auto");

var bucket=d3.select("body")
  .append("div").text("DIV")
  .attr("id","bucket");
            bucket.append("div").attr("class","xxx").text("List: ");
            document.addEventListener("DOMContentLoaded", 
   function(e) {
     var ptypes =["Pigs","Geese","Ducks","Elephants"];
     var content=[];
     for(i=0; i<ptypes.length; i++) {
       content.push({"key":ptypes[i],"data":"xxx"});
     }
     
     keys=d3.select("body").selectAll(".xxx");
     d3.select("body").select(".xxx")
       .selectAll("p")
       .data(content)
       .enter()
       .append("span")
       .html(function(d) {return "   "+d.key+"   "; })
       .on("mouseover",function(d) {
           popup.text(d.data)
            .style("opacity",0.9)
            .style("left", (d3.event.pageX) + "px")    
            .style("top", (d3.event.pageY+20) + "px");
        })
       .on("mouseout",function(d) {
           popup.style("opacity",0)
       });
});

div.popup {
    position: absolute;
    text-align: left;
    width: 200px; height: 200px; padding: 3px;
    background: lightsteelblue;
    border: 0px; border-radius: 4px;
}

&lt;script type="text/javascript" src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<style>
div.popup {
    position: absolute;
    text-align: left;
    width: 200px; height: 200px; padding: 3px;
    background: lightsteelblue;
    border: 0px; border-radius: 4px;
}
</style>
</head>
<body>
    <script>
            var popup=d3.select("body")
                    .append("div")
                    .attr("class","popup")
                    .style("opacity",0)
                    .style("overflow","auto");
            var bucket=d3.select("body")
                    .append("div").text("DIV")
                    .attr("id","bucket");
            bucket.append("div").attr("class","xxx").text("List: ");
            document.addEventListener("DOMContentLoaded", 
            function(e) {
                    var ptypes =["Pigs","Geese","Ducks","Elephants"];
                    var content=[];
                    for(i=0; i<ptypes.length; i++) {

content.push({"key":ptypes[i],"data":"xxx"});
                    }
                    keys=d3.select("body").selectAll(".xxx");
                    d3.select("body").select(".xxx")
                            .selectAll("p")
                            .data(content)
                            .enter()
                            .append("span")
                            .html(function(d) {return "   "+d.key+"   "; })
                            .on("mouseover",function(d) {
                                    popup.text(d.data)
                                    .style("opacity",0.9)
                                    .style("left", (d3.event.pageX) + "px")    
                            .style("top", (d3.event.pageY+20) + "px");
                            })
                            .on("mouseout",function(d) {
                                    popup.style("opacity",0)
                            });
            });
    </script>
</body>
</html>

代码可以运行，但在开始运行并识别鼠标事件之前存在很大延迟（5 秒或更多秒）。

【问题讨论】：

标签： d3.js initialization mouseover freeze

【解决方案1】：

没有时间问题，指针事件似乎可以立即工作。问题是您的 div 涵盖了您要与之交互的元素：

我将不透明度设置为 0.4 而不是 0，我们可以看到 div 扼杀了您的交互元素。如果您将鼠标移到大象的“ts”上，我会立即进行交互。将鼠标悬停在“ts”上后，div 会移开，以便与其余元素进行交互：

var popup=d3.select("body")
   .append("div")
   .attr("class","popup")
   .style("opacity",0.4)
   .style("overflow","auto");

var bucket=d3.select("body")
  .append("div").text("DIV")
  .attr("id","bucket");
            bucket.append("div").attr("class","xxx").text("List: ");
            document.addEventListener("DOMContentLoaded", 
   function(e) {
     var ptypes =["Pigs","Geese","Ducks","Elephants"];
     var content=[];
     for(i=0; i<ptypes.length; i++) {
       content.push({"key":ptypes[i],"data":"xxx"});
     }
     
     keys=d3.select("body").selectAll(".xxx");
     d3.select("body").select(".xxx")
       .selectAll("p")
       .data(content)
       .enter()
       .append("span")
       .html(function(d) {return "   "+d.key+"   "; })
       .on("mouseover",function(d) {
           popup.text(d.data)
            .style("opacity",0.9)
            .style("left", (d3.event.pageX) + "px")    
            .style("top", (d3.event.pageY+20) + "px");
        })
       .on("mouseout",function(d) {
           popup.style("opacity",0.4)
       });
});

div.popup {
    position: absolute;
    text-align: left;
    width: 200px; height: 200px; padding: 3px;
    background: lightsteelblue;
    border: 0px; border-radius: 4px;
}

&lt;script type="text/javascript" src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;

然后解决方案是将 div 的 pointer-events 样式设置为 none：

var popup=d3.select("body")
   .append("div")
   .attr("class","popup")
   .style("opacity",0.4)
   .style("overflow","auto");

var bucket=d3.select("body")
  .append("div").text("DIV")
  .attr("id","bucket");
            bucket.append("div").attr("class","xxx").text("List: ");
            document.addEventListener("DOMContentLoaded", 
   function(e) {
     var ptypes =["Pigs","Geese","Ducks","Elephants"];
     var content=[];
     for(i=0; i<ptypes.length; i++) {
       content.push({"key":ptypes[i],"data":"xxx"});
     }
     
     keys=d3.select("body").selectAll(".xxx");
     d3.select("body").select(".xxx")
       .selectAll("p")
       .data(content)
       .enter()
       .append("span")
       .html(function(d) {return "   "+d.key+"   "; })
       .on("mouseover",function(d) {
           popup.text(d.data)
            .style("opacity",0.9)
            .style("left", (d3.event.pageX) + "px")    
            .style("top", (d3.event.pageY+20) + "px");
        })
       .on("mouseout",function(d) {
           popup.style("opacity",0.4)
       });
});

div.popup {
    position: absolute;
    text-align: left;
    width: 200px; height: 200px; padding: 3px;
    background: lightsteelblue;
    border: 0px; border-radius: 4px;
    pointer-events:none;
}

&lt;script type="text/javascript" src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;

【讨论】：

这让我想起了"How/when do event listeners get attached in d3.js?" 中提出的类似问题。不过，不是重复的。