Question

每当我快速地将鼠标移到我的元素上时，最终结果是不可预测的。

是否有一种方法可以在D3中分层转换以防止出现此问题，或者只是您需要处理的问题喜欢把元素放得更远？

我也尝试过使用mousemove，这样连续移动元素会将其刷新到正确的状态，但是当你移动时元素会变大（即使它被设置为静态数字）并且还有很多闪烁。 / p>

这是我的所有互动。它是一组排列成圆圈的椭圆，带有文本标签和路径，将它们相互连接起来。（D3上的捆绑布局）。在鼠标悬停时，仅显示鼠标悬停的一个以及相关的连接节点和路径。但是，如果我从椭圆到椭圆的速度非常快，椭圆会改变尺寸，但路径将是不可预测的。我必须故意将鼠标移出椭圆并从没有听众的区域返回。

 nodeGroup.on("mouseenter",function(){

  //hides ALL circles 
  svg.selectAll("ellipse")
     .style("opacity","0");

  //reshow the one you mouse over
  d3.select(this).select("ellipse")
    .style("opacity","1")
    .transition()
    .attr("rx", magnifiedCircle)
    .attr("ry", magnifiedCircle/2);

  //make text bigger
  d3.select(this).select("text")
    //.transition()
    .style("font-size","25");

  //remove all paths (draw relevant ones below)
  d3.selectAll("path")
    .style("opacity",0);

  //name of selected node
  var thisID = (d3.select(this).attr("id"));

  //draw alls path related to selected node
  nodeGroup.selectAll("path")
           .style("opacity", function(d,i){
              if(d[0] == thisID){

                  //draw related circles
                  svg.selectAll("#Circle_" + trimWhitespace(d[1]))
                     .style("opacity", 1);
                  svg.select("#Circle_" + trimWhitespace(d[0]))
                     .style("opacity", 1);

                return 1;
              }
              else 
                return 0;
           });

Answer 1

好的我通过删除鼠标退出的转换来修复它。我认为作为出口的一般经验法则，应该没有过渡，因此没有一段时间可以发生竞争条件。然后可能出现的唯一问题是重叠的侦听器。

虽然我仍然不知道为什么mousemove会导致文本不断增长或闪烁发生的原因。

D3.js：快速鼠标交互导致视图不正确

1 个答案: