Définir le Niveau de Zoom dans Vis.js
J'ai un réseau que je suis en train de construire avec vis.js mais elle est trop grande largeur pour s'adapter dans les pages de " conteneur. Le réseau s'exécute de gauche à droite et contient des étapes d'un processus spécifique. Comme une personne accomplit des tâches, un serveur de flux de nouveaux JSON enregistrements à mettre à jour les couleurs.
Je ne peux pas changer la taille du conteneur en raison de la mise en page. Lorsque la charge du réseau, il provoque la police pour être incroyablement petit et illisible. Est-il une manière que je pourrais régler le niveau de zoom comme une option de sorte que seule l'étape actuelle du processus afficher?
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);
}
OriginalL'auteur td-edge | 2014-12-12
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser des fonctions comme
fit
,focus
, etmoveTo
modifier le niveau de zoom.Exemple: http://visjs.org/examples/network/other/animationShowcase.html
Docs: http://visjs.org/docs/network/
test.focusOnNode(1,{scale: 1, offset:{x: -(width/3)}});
Pouvez vous s'il vous plaît prendre un coup d'oeil à mon problème avec vis de montage?
Maintenant, il est
network.focus(1, {scale: 1})
OriginalL'auteur Jos de Jong