当节点具有坐标时，Vis.js 节点布局未按预期运行

问题描述

当节点具有指定坐标时，我在理解 vis.js 网络中节点的行为时遇到了一些麻烦。在下面的代码中，我制作了 3 个示例，其中示例 1 和示例 3 的行为符合预期，但示例 2 的行为却出乎意料。

在示例 2 中，我为节点指定了坐标，但布局不是固定的。网络最初打开物理，然后在稳定物理时应该关闭。

我希望节点会像示例 1 中那样放置，但是节点应该是可拖动的，并且在拖动时节点的行为应该与示例 3 中的一样。但看起来物理仍然打开而节点没有如例 1 所示。

我看不出我做错了什么。有人可以帮忙吗？

var options = {
  physics: { enabled: true,solver: 'repulsion' },edges: { smooth: false },nodes: { shape: 'Box' },layout: { hierarchical: { enabled: false } }
};
var arrowAttr = {  to: { enabled: true,type: "triangle" }};
var edges = new vis.DataSet([
  {arrows: arrowAttr,from: "1",to: "2",hidden: false},{arrows: arrowAttr,from: "3",to: "4",from: "2",to: "3",]);

// Example 1
var nodes1 = new vis.DataSet([
  {id: "1",label: "Ex 1,Node 1",x: -50,y: -50,fixed: { x: true,y: true}},{id: "2",Node 2",y: 50,{id: "3",Node 3",x: 50,{id: "4",Node 4",y: true}}
]);
var data1 = {
  nodes: nodes1,edges: edges
};  
var container1 = document.getElementById('network1');
var network = new vis.Network(container1,data1,options);
network.on("stabilizationIterationsDone",function () {
  network.setoptions( { physics: false } );
});

// Example 2
var nodes2 = new vis.DataSet([
  {id: "1",label: "Ex 2,fixed: { x: false,y: false}},y: false}}
]);
var data2 = {
  nodes: nodes2,edges: edges
};
options.layout.randomSeed = Math.random();
var container2 = document.getElementById('network2');
var network = new vis.Network(container2,data2,function () {
  network.setoptions( { physics: false } );
});

// Example 3
var nodes3 = new vis.DataSet([
  {id: "1",label: "Ex 3,Node 1"},Node 2"},Node 3"},Node 4"}
]);
var data3 = {
  nodes: nodes3,edges: edges
};
options.layout.randomSeed = Math.random();
var container3 = document.getElementById('network3');
var network = new vis.Network(container3,data3,function () {
  network.setoptions( { physics: false } );
});

<script type="text/javascript" src="https://unpkg.com/vis-network@9.0.4/dist/vis-network.min.js"></script>
Example 1: Behaves as expected. Nodes are fixed to the coordinates specified.
<div id="network1" style="width: 250px; height: 250px; border: 1px solid #000"></div>
Example 2: Does not behave as expected. Why is the random layout ignored? And physics is not turned off as expected when dragging nodes. Physics is correctly turned off in the next example 3 with the same code.
<div id="network2" style="width: 250px; height: 250px; border: 1px solid #000"></div>
Example 3: Behaves as expected. Nodes are assigned new coordinates randomly on every reload and physics is turned off correctly as specified in the code.
<div id="network3" style="width: 250px; height: 250px; border: 1px solid #000"></div>

解决方法

如果目标是根据示例 1 初始化网络，并能够根据示例 3 移动节点 - 那么一个建议是简单地使用示例 1 代码示例，但在 stabilizationIterationsDone 事件中，{{ 1}} update 中的每个节点生成 nodes1。如下图所示：

fixed: false

var options = {
  physics: { enabled: true,solver: 'repulsion' },edges: { smooth: false },nodes: { shape: 'box' },layout: { hierarchical: { enabled: false } }
};
var arrowAttr = {  to: { enabled: true,type: "triangle" }};
var edges = new vis.DataSet([
  {arrows: arrowAttr,from: "1",to: "2",hidden: false},{arrows: arrowAttr,from: "3",to: "4",from: "2",to: "3",]);

// Example 1
var nodes1 = new vis.DataSet([
  {id: "1",label: "Ex 1,Node 1",x: -50,y: -50,fixed: { x: true,y: true}},{id: "2",Node 2",y: 50,{id: "3",Node 3",x: 50,{id: "4",Node 4",y: true}}
]);
var data1 = {
  nodes: nodes1,edges: edges
};  
var container1 = document.getElementById('network1');
var network1 = new vis.Network(container1,data1,options);
network1.on("stabilizationIterationsDone",function () {
  network1.setOptions( { physics: false } );
  // now update data set so that each node is no longer fixed
  nodes1.forEach(function(node) {
    nodes1.update({id: node.id,fixed: false});
  });
});

关于示例 2 中物理的意外性质 - 您对每个示例使用 <script type="text/javascript" src="https://unpkg.com/vis-network@9.0.4/dist/vis-network.min.js"></script> <div id="network1" style="width: 250px; height: 250px; border: 1px solid #000"></div>。如果您将其替换为 var network = ...、var network1 = ... 等，则此问题将消失：

var network2 = ...

var options = {
  physics: { enabled: true,function () {
  network1.setOptions( { physics: false } );
});

// Example 2
var nodes2 = new vis.DataSet([
  {id: "1",label: "Ex 2,fixed: { x: false,y: false}},y: false}}
]);
var data2 = {
  nodes: nodes2,edges: edges
};
options.layout.randomSeed = Math.random();
var container2 = document.getElementById('network2');
var network2 = new vis.Network(container2,data2,options);
network2.on("stabilizationIterationsDone",function () {
  network2.setOptions( { physics: false } );
});

// Example 3
var nodes3 = new vis.DataSet([
  {id: "1",label: "Ex 3,Node 1"},Node 2"},Node 3"},Node 4"}
]);
var data3 = {
  nodes: nodes3,edges: edges
};
options.layout.randomSeed = Math.random();
var container3 = document.getElementById('network3');
var network3 = new vis.Network(container3,data3,options);
network3.on("stabilizationIterationsDone",function () {
  network3.setOptions( { physics: false } );
});

细长的布局仍然存在，所以我会参考最初的建议来解决这个问题。

javascript vis.js vis.js-network