Остановите физику vis.js после загрузки узлов, но разрешите перетаскиваемые узлы
Я пытаюсь нарисовать диаграмму сети vis.js, и у меня есть загрузка и расположение узлов. Затем я хочу, чтобы физика была отключена, чтобы узлы могли перемещаться пользователем. Я пробовал это, но это не работает.
var options = {
nodes: {
borderWidth:4,
size:60,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black'}
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: 'black'
},
{ physics: enabled: false; };
Кто-нибудь делал это? Если да, можете ли вы предоставить пример или совет о том, как лучше всего это сделать. Я также прочитал объяснение, находящееся здесь, но не слишком знаком с Java, я не могу понять, какие шаги.
Спасибо
3 ответа
После некоторой дополнительной работы и помощи от разработчика vis.js, здесь готовый код, за исключением данных json и некоторых опций. Хитрость заключается в том, чтобы использовать "stabilizationIterationsDone"
Событие и отключение физики:
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: ...,
edges: ...,
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18,
avoidOverlap: 1.5
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 25
}
}
};
network = new vis.Network(container, data, options);
network.on("stabilizationIterationsDone", function () {
network.setOptions( { physics: false } );
});
Я полагаю, вы сначала хотите, чтобы сеть стабилизировалась, и только потом отключить физику? В этом случае вы можете загрузить сеть с physics
а также stabilization
включен. Как только узлы стабилизируются, stabilized
событие запущено. Затем вы можете отключить физику с помощью network.setOptions
Я смог понять это, и теперь код выглядит так
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth:1,
size:45,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black',
size: 11,
face :'arial',
},
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: {
color:'#848484',
highlight:'#848484',
hover: '#848484',
},
font: {
color: '#343434',
size: 11, // px
face: 'arial',
background: 'none',
strokeWidth: 5, // px
strokeColor: '#ffffff',
align:'vertical'
},
smooth: {
enabled: false, //setting to true enables curved lines
//type: "dynamic",
//roundness: 0.5
},
}
};
network = new vis.Network(container, data, options);
network.setOptions({
physics: {enabled:false}
});
}
Я должен был переместить network.setOptions()
как показано в новом коде, и теперь он работает как нужно.