我有一个网络,我正在使用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',{id: 4,label: 'Step 4',{id: 5,label: 'Step 5',{id: 6,label: 'Step 6',{id: 7,label: 'Step 7',{id: 8,label: 'Step 8',{id: 9,label: 'Step 9',{id: 10,label: 'Step 10',{id: 11,label: 'Step 11',{id: 12,x: width * 2,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,{from: 3,to: 4,{from: 4,to: 5,{from: 5,to: 6,{from: 6,to: 7,{from: 7,to: 8,{from: 8,to: 9,{from: 9,to: 10,{from: 10,to: 11,{from: 11,to: 12,length: 200}
];
var testData = {
nodes: nodes,edges: edges
};
var testOptions = {
width: '100%'
};
var test = new vis.Network(testContainer,testData,testOptions);
}
解决方法
您可以使用fit,focus和move等功能来更改缩放级别.
示例：http://visjs.org/examples/network/other/animationShowcase.html
文件：http://visjs.org/docs/network/