D3.js : 빠른 마우스 상호 작용으로 부적절한보기가 발생합니다

Question

마우스를 내 요소 위에 올려 놓으면 결과가 예측할 수 없습니다.

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

Answer 1

Ok 마우스 종료를위한 전환을 제거하여 문제를 해결했습니다. 내 생각에 출구에 대한 일반적인 경험으로는 전환이 없어야 경쟁 조건이 발생할 수있는 시간이 없다고 생각합니다. 그러면 발생할 수있는 유일한 문제는 중복 된 청취자입니다.

비록 mousemove가 텍스트가 계속 커지거나 왜 깜박이는지 아직도 알지 못합니다.