Javascript 删除d3 force布局的动画
我只希望有一个默认排列,然后我只希望在拖动气泡时,不影响其他气泡: 神奇之处可能在于Javascript 删除d3 force布局的动画,javascript,css,d3.js,Javascript,Css,D3.js,我只希望有一个默认排列,然后我只希望在拖动气泡时,不影响其他气泡: 神奇之处可能在于勾选事件处理程序: force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; })
勾选事件处理程序:
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
如何更改此函数以不设置其他节点/链接的动画,只更改拖动的节点的位置
强制布局有其自己的拖动行为实现,但这仅在处理勾选事件时有效(在本例中您没有这样做)。因此,您必须自己使用拖动行为,这使事情变得更加复杂:
var drag = d3.behavior.drag().on("drag", dragged);
svg.selectAll("circle").call(drag);
function dragged(d) {
svg.selectAll("line")
.filter(function(e) { return e.source.x == d.x && e.source.y == d.y; })
.attr("x1", function(e) { return e.source.x = d3.event.x; })
.attr("y1", function(e) { return e.source.y = d3.event.y; });
svg.selectAll("line")
.filter(function(e) { return e.target.x == d.x && e.target.y == d.y; })
.attr("x2", function(e) { return e.target.x = d3.event.x; })
.attr("y2", function(e) { return e.target.y = d3.event.y; });
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
这将通过检查每个链接的源/目标坐标来标识连接到拖动节点的链接。这是非常低效的,不是最好的做事方式
完整的示例。听起来你想要一个加号拖动。@Larskothoff Exaclty,我如何才能添加拖动功能?。在圆上调用(force.drag)
。@Larskothoff它不起作用:对,在这种情况下更难,因为你没有一个tick事件处理程序来处理拖动。您将不得不使用拖动行为--(无链接拖动的概念验证)。改进:e.target.x==d.x&&e.target.y==d.y
可以减少为e.target==d
,与e.source
相同。