d3突出顯示mouseover上的節點會導致鼠標脫離svg空間時的意外行爲

Question

我已經編寫了一些強調（通過增加筆畫寬度/筆觸顏色變化）節點可視化（某些圓圈，某些rects）和相關鏈接/當用戶在節點上「停下來」的節點。當用戶將鼠標懸起時，高光消失。這一切都工作正常，除非當點擊狀態的節點被拖離svg空間（技術上我已經將可視化約束到svg空間，但顯然鼠標點不受約束）並被釋放。當鼠標按鈕被釋放時，突出顯示然後不會消失。

jsfiddle here - http://jsfiddle.net/hiwilson1/bga0wcLL/。

我選擇以實現突出顯示的方法，是操縱與所點擊的可視化節點相關聯的基礎對象，然後更新可視化，這是所有照顧在以下onmousedown事件/ onmouseup事件功能：

function highlight(d) { 

    if (event.type == "mousedown") { 
     d.highlight = 1; 
     d.associatedLinks.forEach(function(link, i) { 
      link.highlight = 1; 
      link.source.highlight = 1; 
      link.target.highlight = 1; 
     }) 
    } 
    else { 
     d.highlight = 0; 
     d.associatedLinks.forEach(function(link, i) { 
      link.highlight = 0; 
      link.source.highlight = 0; 
      link.target.highlight = 0; 
     }) 
    } 

    svg.selectAll(".node .shape") 
     .attr("stroke", function(d) { if (d.highlight == 1) { return "Black"}}) 
     .attr("stroke-width", function(d) { return (d.highlight == 1) ? 3 : 1 });   

    svg.selectAll(".link") 
     .attr("stroke", function(d) { return (d.highlight == 1) ? "Black" : "Grey" }) 
     .attr("stroke-width", function(d) { return (d.highlight == 1) ? 3 : 1 }); 
} 

Answer 1

您可以收聽mousemove事件並在此後進行假設。在highlight函數中，您將設置值爲lastHighlightedNode

例如，

lastHighlightedNode = null; 
var svg = d3.select("body").append("svg") 
    .attr("width", w) 
    .attr("height", h); 

d3.select("body").on('mousemove', function() { 
    if ((d3.mouse(document.getElementsByTagName('svg')[0])[0] == 0 || d3.mouse(document.getElementsByTagName('svg')[0])[1] == 0) && lastHighlightedNode != null) { 
     highlight(lastHighlightedNode); 
    }; 
}); 


..... 



    function highlight(d) { 
     lastHighlightedNode = d; 

.... 

演示：http://jsfiddle.net/bga0wcLL/1/