我有一个网络,我正在使用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