javascript 在 Vis.js 中设置缩放级别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27450311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set Zoom Level in Vis.js
提问by td-edge
I have a network that I'm building with vis.js, but it is too large width-wise to fit in the pages' container. The network runs left to right and contains steps about a specific process. As a person completes tasks, a server feeds new JSON records to update the colors.
我有一个使用 vis.js 构建的网络，但它的宽度太大，无法放入页面的容器中。网络从左到右运行，包含有关特定过程的步骤。当一个人完成任务时，服务器会提供新的 JSON 记录以更新颜色。
I can't change the container size due to the layout. When the network loads, it causes the font to be incredibly small and unreadable. Is there a way I could set the zoom level as an option so that only the current step in the process will show?
由于布局，我无法更改容器大小。当网络加载时，它会导致字体非常小且不可读。有没有办法可以将缩放级别设置为选项，以便仅显示流程中的当前步骤？
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);
}
回答by Jos de Jong
You can use functions like fit, focus, and moveTochange the zoom level.
您可以使用类似功能fit，focus以及moveTo更改缩放级别。
Example: http://visjs.org/examples/network/other/animationShowcase.html
示例：http: //visjs.org/examples/network/other/animationShowcase.html
