0

每当我很快地将鼠标悬停在我的元素上时，最终结果都是不可预测的。

在 D3 中是否有一种分层过渡的方法可以防止这个问题，或者它只是你必须处理的事情，比如将元素放置得更远？

我还尝试使用mousemove，以便在元素上连续移动会将其刷新到正确的状态，但元素会随着您的移动而变大（即使它设置为静态数字）并且还会出现很多闪烁。

这是我所有的互动。它是一组排列成圆形的椭圆，带有文本标签和将它们相互连接的路径。（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;
           });
4

1 回答 1

0

好的，我通过删除鼠标退出的过渡来修复它。我认为作为退出的一般经验法则，不应该有任何过渡，这样就不会出现竞争条件。那么唯一可能发生的问题是重叠的侦听器。

虽然我仍然不知道为什么 mousemove 会导致文本不断增长或为什么会出现闪烁。

于 2013-06-25T14:09:55.220 回答