javascript - 当鼠标离开 svg 空间时，d3 在鼠标悬停时突出显示节点会导致意外行为

Question

我编写了一些代码，当用户将鼠标放在节点上时，突出显示(通过增加笔画宽度/更改笔画颜色)节点可视化(一些圆圈，一些矩形)和关联的链接/节点。当用户“松开鼠标”时，突出显示就会消失。这一切都工作正常，除非处于单击状态的节点被拖出 svg 空间(从技术上讲，我已将可视化限制在 svg 空间，但显然鼠标点不受约束)并释放。当释放鼠标按钮时，突出显示不会消失。

jsfiddle在这里 - 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/