Zoom-Ebene in Vis.js setzen

Question

Ich habe ein Netzwerk, das ich mit vis.js baue, aber es ist zu groß, um in den Seitencontainer zu passen. Das Netzwerk wird von links nach rechts ausgeführt und enthält Schritte zu einem bestimmten Prozess. Wenn eine Person Aufgaben ausführt, füttert ein Server neue JSON-Datensätze, um die Farben zu aktualisieren.

Ich kann die Containergröße aufgrund des Layouts nicht ändern. Wenn das Netzwerk geladen wird, wird die Schriftart unglaublich klein und unlesbar. Gibt es eine Möglichkeit, die Zoomstufe als Option festzulegen, sodass nur der aktuelle Schritt angezeigt wird?

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); 
} 

Answer 1

können Sie Funktionen wie fit, focus und moveTo die Zoomstufe ändern.

Beispiel: http://visjs.org/examples/network/other/animationShowcase.html

Docs: http://visjs.org/docs/network/