2

问题：在切换到新的（4.21）版本的 vis.js（从 4.18 开始）后，我的图表全乱了。

编辑：更改发生在版本 4.19.1 和 4.20 之间。我想这与4.20 版本中引入的网络多次更改有关。

我正在免费建立一个家庭。我花了一些时间得到一个漂亮的图表。然后我发现有新版本的 vis.js 可用。一旦我决定使用它，我的图表的边缘就开始交叉。

这是我使用 4.18.1 的漂亮图表： 在此处输入图像描述

如果我更改为 4.21.0，会发生以下情况： 在此处输入图像描述

我做错了什么？如何解决这个问题？相同的数据，相同的代码。唯一的区别是：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>

代替

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>

这是4.18.1 fiddle和4.21.0 fiddle。

以及下面的 4.21.0 参考的完整代码：

    // create an array with nodes
    var nodes = new vis.DataSet([
		{id: 1, label: 'Person 1'},
		{id: 2, label: 'Person 2'},
		{id: 3, label: 'Person 3'},
		{id: 4, label: 'Person 4'},
		{id: 5, label: 'Person 5'},
		{id: 6, label: 'Person 6'},
		{id: 7, label: 'Person 7'},
		{id: 8, label: 'Person 8'},
		{id: 9, label: 'Person 9'},
		{id: 10, label: 'Person 10'},
		{id: 11, label: 'Person 11'},
		{id: 12, label: 'Person 12'},
		{id: 13, label: 'Person 13'},
		{id: 14, label: 'Person 14'},
		{id: 15, label: 'Person 15'},
		{id: 16, label: 'Person 16'},
		{id: 17, label: 'Person 17'},
		{id: 18, label: 'Person 18'},
		{id: 19, label: 'Person 19'},
		{id: 20, label: 'Person 20'},
		{id: 21, label: 'Person 21'},
		{id: 22, label: 'Person 22'},
		{id: 23, label: 'Person 23'},
		{id: 24, label: 'Person 24'},
		{id: 25, label: 'Person 25'},
		{id: 26, label: 'Person 26'},
		{id: 27, label: 'Person 27'},
		{id: 28, label: 'Person 28'},
		{id: 29, label: 'Person 29'},
		{id: 30, label: 'Person 30'},
		{id: 31, label: 'Person 31'},
    ]);
    // create an array with edges
    var edges = new vis.DataSet([
		{from: 1, to: 5, arrows:'from'},	
		{from: 2, to: 23, arrows:'from'},	
		{from: 3, to: 2, arrows:'from'},	
		{from: 4, to: 2, arrows:'from'},	
		{from: 5, to: 7, arrows:'from'},	
		{from: 6, to: 9, arrows:'from'},	
		{from: 7, to: 13, arrows:'from'},	
		{from: 8, to: 11, arrows:'from'},	
		{from: 13, to: 16, arrows:'from'},	
		{from: 16, to: 14, arrows:'from'},			
		{from: 18, to: 25, arrows:'from'},	
		{from: 19, to: 26, arrows:'from'},	
		{from: 20, to: 30, arrows:'from'},	
		{from: 21, to: 28, arrows:'from'},	
		{from: 22, to: 20, arrows:'from'},	
		{from: 23, to: 18, arrows:'from'},	
		{from: 1, to: 6, arrows:'from'},		
		{from: 2, to: 22, arrows:'from'},		
		{from: 3, to: 1, arrows:'from'},		
		{from: 4, to: 1, arrows:'from'},		
		{from: 5, to: 8, arrows:'from'},		
		{from: 6, to: 10, arrows:'from'},		
		{from: 8, to: 12, arrows:'from'},
		{from: 13, to: 17, arrows:'from'},
		{from: 16, to: 15, arrows:'from'},	
		{from: 18, to: 24, arrows:'from'},
		{from: 19, to: 27, arrows:'from'},
		{from: 20, to: 31, arrows:'from'},
		{from: 21, to: 29, arrows:'from'},
		{from: 22, to: 21, arrows:'from'},
		{from: 23, to: 19, arrows:'from'},	
	]);

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };

	var options = {
		layout: {
			hierarchical: {
				enabled: true,
				//levelSeparation: 130,
				nodeSpacing: 220,
				blockShifting: false,
				parentCentralization: false,
				edgeMinimization: true,
				direction: 'DU',
				sortMethod: 'directed',
			},
		},
		edges: {
			smooth: {
				type: "cubicBezier",
				forceDirection: 'vertical',
				roundness: 0.25
			},
		},
		physics: false,
	}	

    // initialize your network!
    var network = new vis.Network(container, data, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<body>
  <div id="mynetwork"></div>
</body>

4

0 回答 0