Почему в этом коде d3 выполняется задержка в несколько секунд? - PullRequest
Новая
       48

Почему в этом коде d3 выполняется задержка в несколько секунд?

1 голос
/ 11 июля 2019

Я добавляю группу из <span> элементов к <div> и хочу всплывающее окно, когда я наведу на них курсор мыши.

Мой код работает, но есть 5 (или более) секундная задержка между завершением DOM и обработкой событий мыши. (d3 v3 на Chrome): 

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;
}
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<!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 или более секунд), прежде чем он начинает работать и распознает события мыши.

1 Ответ

1 голос
/ 11 июля 2019

Нет проблем с синхронизацией, события указателя, кажется, работают сразу. Проблема в том, что ваш div охватывает элементы, с которыми вы хотите взаимодействовать:

enter image description here

Я установил непрозрачность на 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;
}
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>

Тогда можно будет установить стиль pointer-events для div на 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;
}
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
...