问当鼠标移出d3空间时，在鼠标悬停时突出显示节点会导致意外行为
EN

Stack Overflow用户

提问于 2015-05-28 18:54:51

回答 1查看 178关注 0票数 1

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

d3.js

javascript

回答 1

Stack Overflow用户

发布于 2015-05-28 20:20:21

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30504562

复制

相似问题

问当鼠标移出d3空间时，在鼠标悬停时突出显示节点会导致意外行为
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当鼠标移出d3空间时，在鼠标悬停时突出显示节点会导致意外行为EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当鼠标移出d3空间时，在鼠标悬停时突出显示节点会导致意外行为
EN