[英]How can I get `vis.js` `vis-network` to run on React.js?
[英]How to fit or zoom out a React Vis.JS Network Graph?
晚上好,我的網絡圖有以下設置:
const exceptionsGraph = {
nodes: graph,
edges: edges
}
// Graph Options
const options = {
height: "80%",
width: "100%",
nodes: {
shape: "dot",
size: 16
},
layout: {
hierarchical: false
},
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18,
},
maxVelocity: 146,
solver: "forceAtlas2Based",
timestep: 0.35,
stabilization: {
enabled: true,
iterations: 2000,
updateInterval: 25,
},
},
edges: {
color: "#abb4be"
}
}
然后我這樣稱呼它:
<Graph graph={exceptionsGraph} options={options} />
但是當它渲染時,它全部放大了,所以看起來很糟糕。 像這樣:
我希望它看起來像這樣:
我怎樣才能在 React 上做到這一點?
提前致謝
您需要在穩定事件中調用 fit function。
聲明事件 object 並定義穩定:
const events = {
stabilized: () => {
if (network) { // Network will be set using getNetwork event from the Graph component
network.setOptions({ physics: false }); // Disable physics after stabilization
network.fit();
}
}
};
這就是您定義 Graph 組件的方式:
<Graph
graph={graph}
options={options}
events={events}
getNetwork={network => {
setNetwork(network);
}}
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.