D3.js：快速鼠標交互會導致不正確的視圖

每當我將鼠標放在我的元素上時，實際上很快就會導致最終結果不可預知。D3.js：快速鼠標交互會導致不正確的視圖

在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; 
      });

來源

2013-06-24 user2483724

您是否正在尋找一種方法來在指針觸及元素時立即觸發mouseover事件？ –

究竟是什麼問題？什麼結果是不可預測的？你想如何表現？你能發佈代碼嗎？ –

添加要發佈的詳細信息 – user2483724

確定我通過去除轉換爲鼠標出口固定它。我認爲作爲退出的一般經驗，不應該有任何轉換，以便沒有可能發生競爭狀況的時間段。那麼唯一可能發生的問題是重疊的聽衆。

雖然我仍然不知道爲什麼mousemove會導致文本不斷增長或爲什麼閃爍發生。

來源

2013-06-25 14:09:55 user2483724

D3.js：快速鼠標交互會導致不正確的視圖

回答

相關問題