Question

我正在努力开发D3中的力导向图。现在当我鼠标悬停节点时，它将连接链接的不透明度从0更改为1，然后当我使用鼠标输出时，将不透明度返回到0。

工作正常，但我遇到的麻烦就是点击节点，即使在mouseout事件发生后，仍然保持链接的不透明度为1。然后我希望能够点击其他节点以使其链接不透明1。然后还可以单击之前单击的一些节点，以便能够将其关联链接的不透明度返回到0.

简而言之，我希望能够切换节点的相关链接的不透明度，而不受鼠标输出事件的影响。我当前代码的示例如下。我想我可能必须设置一个新的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);

Answer 1

我实际上终于自己想出了这个。我创建了一个锁定字段，接受一个＆＃34; true＆＃34;或＆＃34;假＆＃34;。然后我在mouseoff函数中添加了一个if语句，它只对那些没有＆＃34; true＆＃34;的元素启用鼠标功能。在他们的锁定领域。

如何在D3中单击后防止鼠标移动？

1 个答案: