2
我正在开发D3中的一个力有向图。现在,当我mouseover节点它将连接链接的不透明度从0更改为1,然后当我mouseout它将不透明度返回到0.如何防止点击D3后的鼠标移出?
这工作正常,但我遇到麻烦点击该节点即使在出现鼠标事件之后仍将链接的不透明度保持为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);
在您的点击处理程序中,您可以为受影响的链接设置特定属性,然后在您的mouseout处理程序中检查该属性。 –