Javascript 加载节点后停止vis.js物理,但允许拖动可拖动的节点
我试图画一个vis.js网络图,让vis加载并定位节点。然后我希望禁用物理,以便用户可以移动节点。我试过这个,但不起作用Javascript 加载节点后停止vis.js物理,但允许拖动可拖动的节点,javascript,node.js,vis.js,vis.js-network,Javascript,Node.js,Vis.js,Vis.js Network,我试图画一个vis.js网络图,让vis加载并定位节点。然后我希望禁用物理,以便用户可以移动节点。我试过这个,但不起作用 var options = { nodes: { borderWidth:4, size:60, color: { border: '#222222', background: 'grey' }, font:{color:'black'} }, edges:
var options = {
nodes: {
borderWidth:4,
size:60,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black'}
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: 'black'
},
{ physics: enabled: false; };
有人这样做过吗?如果是这样的话,你能提供一个例子或建议来实现这一点。我也阅读了其中的解释,但由于对java不太熟悉,我无法理解其中的步骤
谢谢我想你应该先让网络稳定下来,然后才禁用物理?在这种情况下,您可以在启用
物理
和稳定
的情况下加载网络。一旦节点稳定,将触发稳定
事件。然后你可以通过网络禁用物理。setOptions
我能弄明白这一点,代码现在看起来像这样
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth:1,
size:45,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black',
size: 11,
face :'arial',
},
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: {
color:'#848484',
highlight:'#848484',
hover: '#848484',
},
font: {
color: '#343434',
size: 11, // px
face: 'arial',
background: 'none',
strokeWidth: 5, // px
strokeColor: '#ffffff',
align:'vertical'
},
smooth: {
enabled: false, //setting to true enables curved lines
//type: "dynamic",
//roundness: 0.5
},
}
};
network = new vis.Network(container, data, options);
network.setOptions({
physics: {enabled:false}
});
}
我不得不移动
network.setOptions()
,如新代码所示,它现在可以正常工作了。经过vis.js开发人员的更多工作和帮助,这里是完整的代码,减去json数据和一些选项。诀窍是使用“stabilizationIterationsDone”
事件并禁用物理:
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: ...,
edges: ...,
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18,
avoidOverlap: 1.5
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 25
}
}
};
network = new vis.Network(container, data, options);
network.on("stabilizationIterationsDone", function () {
network.setOptions( { physics: false } );
});
非常感谢您的回复。我在vis.js github网站上读到了这篇文章。我似乎无法获得正确的语法,您是否介意提供一个示例?究竟应该在哪里定义“stabilizationIterationsDone”呢?这是一种处理方式,但是箭头不会移动到最近的边缘。你知道如何在移动一个盒子后发生这种情况吗?