在D3中单击后如何防止鼠标移出？答案

【问题标题】：How to prevent a mouseout after an click in D3?在D3中单击后如何防止鼠标移出？
【发布时间】：2014-06-10 01:11:45
【问题描述】：

我正在开发 D3 中的力有向图。现在，当我将鼠标悬停在节点上时，它会将连接链接的不透明度从 0 更改为 1，然后当我将鼠标移出时，它会将不透明度恢复为 0。

这很好用，但我遇到的问题是即使在 mouseout 事件之后，单击节点也会将链接的不透明度保持在 1。然后我希望能够单击其他节点以使其链接不透明度为 1。然后也可以点击之前点击过的一些节点，可以将其关联链接的不透明度恢复为0。

简而言之，我希望能够切换节点关联链接的不透明度，而不会受到 mouseout 事件的影响。我当前的代码示例如下。我在想当我点击一个节点时我可能需要设置一个新的 id 来打开和关闭？

var nodeClick = function(d) {
    svg.selectAll(".link")
    .filter(function(p) { 
          return _(d.facets).contains(p.target.name)
    })
    .transition()
    .style('stroke-opacity', 0.9);
};

var overText1 = function(d) {
    svg.selectAll(".link")
    .filter(function(p) { 
          return _(d.facets).contains(p.target.name)
    })
    .transition()
    .style('stroke-opacity', 0.9);
};

var overText0 = function(d) {
        svg.selectAll(".link")
        .transition()
        .duration(500)
        .style('stroke-opacity', 0);
    };

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("class", function (d) {
        return d.group === 1 ? "nodeBig" : "node";
    })
    .attr("r", function(d) {return d.radius })
    .style("fill", function (d) {
        return color(d.group);
    })
    .on("mouseover", overText1)
    .on('click', nodeClick)
    .on('mouseout', overText0)
    .call(force.drag);

【问题讨论】：

在您的点击处理程序中，您可以为受影响的链接设置一个特定属性，然后在您的 mouseout 处理程序中进行检查。

标签： d3.js onclick toggle mouseout

【解决方案1】：

实际上，我终于自己想通了。我创建了一个接受“真”或“假”的锁定字段。然后我在 mouseoff 函数中添加了一个 if 语句，它只在锁定字段中没有“true”的元素上启用 mouseoff 功能。

【讨论】：