在 Vis.js 中设置缩放级别答案

【问题标题】：Set Zoom Level in Vis.js在 Vis.js 中设置缩放级别
【发布时间】：2021-03-06 21:03:38
【问题描述】：

我有一个使用 vis.js 构建的网络，但它的宽度太大，无法放入页面的容器中。网络从左到右运行，并包含有关特定过程的步骤。当一个人完成任务时，服务器会提供新的 JSON 记录来更新颜色。

由于布局，我无法更改容器大小。当网络加载时，它会导致字体非常小且难以阅读。有没有办法可以将缩放级别设置为选项，以便仅显示过程中的当前步骤？

function draw() {

test = null;

// create a network
var testContainer = document.getElementById('testing');

// create some nodes
var width = testing.clientWidth;

var nodes = [
  {id: 1, x: 0, y: 1, label: 'Start', color: 'green', shape: 'circle'},
  {id: 2, label: 'Step 2', shape: 'square'},
  {id: 3, label: 'Step 3', shape: 'square'},
  {id: 4, label: 'Step 4', shape: 'square'},
  {id: 5, label: 'Step 5', shape: 'square'},
  {id: 6, label: 'Step 6', shape: 'square'},
  {id: 7, label: 'Step 7', shape: 'square'},
  {id: 8, label: 'Step 8', shape: 'square'},
  {id: 9, label: 'Step 9', shape: 'square'},
  {id: 10, label: 'Step 10', shape: 'square'},
  {id: 11, label: 'Step 11', shape: 'square'},
  {id: 12, x: width * 2, y: 1, label: 'Success!', shape: 'circle'}
];

// create some edges
var edges = [
  {from: 1, to: 2, style: 'arrow', color: 'red', width: 1, length: 200}, // individual length definition is possible
  {from: 2, to: 3, style: 'arrow', width: 1, length: 200},
  {from: 3, to: 4, style: 'arrow', width: 1, length: 200},
  {from: 4, to: 5, style: 'arrow', width: 1, length: 200},
  {from: 5, to: 6, style: 'arrow', width: 1, length: 200},
  {from: 6, to: 7, style: 'arrow', width: 1, length: 200},
  {from: 7, to: 8, style: 'arrow', width: 1, length: 200},
  {from: 8, to: 9, style: 'arrow', width: 1, length: 200},
  {from: 9, to: 10, style: 'arrow', width: 1, length: 200},
  {from: 10, to: 11, style: 'arrow', width: 1, length: 200},
  {from: 11, to: 12, style: 'arrow', width: 1, length: 200}
];

var testData = {
  nodes: nodes,
  edges: edges
};
var testOptions = {
        width: '100%'
};
var test = new vis.Network(testContainer, testData, testOptions);
}

【问题讨论】：

标签： javascript visualization vis.js vis.js-network chap-links-library

【解决方案1】：

您可以使用fit、focus 和moveTo 等函数更改缩放级别。

示例：https://visjs.github.io/vis-network/examples/network/other/animationShowcase.html

文档：https://visjs.github.io/vis-network/docs/network/

【讨论】：

谢谢！我不知道我怎么忽略了这一点。语法有点奇怪，但这对我有用：test.focusOnNode(1,{scale: 1, offset:{x: -(width/3)}});
你能看一下my problem的时间线吗？
请更新链接，它们不再有效。