当鼠标离开SVG空间时，在鼠标上方突出显示节点会导致意外行为

d3 highlighting nodes on mouseover causes unexpected behaviour when mouse taken off of svg space

本文关键字：鼠标 节点 意外 显示 空间 SVG 离开 方突出      更新时间：2023-09-26

我写了一些代码，当用户在节点上"鼠标下移"时，突出显示(通过增加笔画宽度/改变笔画颜色)节点可视化(一些圆圈，一些矩形)和相关的链接/节点。当用户"上移鼠标"时，高亮显示就会消失。这一切都很好，除非处于单击状态的节点被拖出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 });
}

您可以侦听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/

相关文章：