Javascript 冻结力定向网络图及其在D3中的可拖动
我正试图完全冻结d3中的力定向网络!我已尝试将“摩擦力”值设置为0,但网络会变得更密集,节点仍略微悬停Javascript 冻结力定向网络图及其在D3中的可拖动,javascript,d3.js,force-layout,Javascript,D3.js,Force Layout,我正试图完全冻结d3中的力定向网络!我已尝试将“摩擦力”值设置为0,但网络会变得更密集,节点仍略微悬停 var force = d3.layout.force() .charge(-220) .linkDistance(70) .friction(0); 我还希望我的节点是可拖动的,即在拖动节点时移动位置 最终,我试图得到类似于Cytoscape js的东西,它看起来像 谢谢 首先,如果要在特定时间“冻结”图形,可以使用forcelayout的命令: force.stop() 最好先让图形自
var force = d3.layout.force()
.charge(-220)
.linkDistance(70)
.friction(0);
我还希望我的节点是可拖动的,即在拖动节点时移动位置
最终,我试图得到类似于Cytoscape js的东西,它看起来像
谢谢 首先,如果要在特定时间“冻结”图形,可以使用force
layout的命令:
force.stop()
最好先让图形自组织(使用),然后停止力:
// include in beginning of script
force.start();
for (var i = 0; i < n; ++i) force.tick();
force.stop();
var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);
function dragstart(d, i) {
//force.stop() // stops the force auto positioning before you start dragging
}
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
tick(); // this is the key to make it work together with updating both px,py,x,y on d !
}
function dragend(d, i) {
//d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
//tick();
//force.resume();
}
function tick() {
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 + ")"; });
};