如何调整或缩小 React Vis.JS 网络图？答案

【问题标题】：How to fit or zoom out a React Vis.JS Network Graph?如何调整或缩小 React Vis.JS 网络图？
【发布时间】：2020-10-07 13:56:04
【问题描述】：

晚上好，我的网络图有以下设置：

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 上实现这一点？

提前致谢

【问题讨论】：

我试过这种方法，但没用 = network.fit()}/>
这是您使用的库吗？ github.com/crubier/react-graph-vis
是的@diedu，完全正确。那是图书馆。
您尝试过autoResize 选项吗？ visjs.github.io/vis-network/docs/network/index.html
是的，我做到了，但没有运气:(

标签： reactjs vis.js react-graph-vis

【解决方案1】：

您需要在 stable 事件中调用 fit 函数。

声明事件对象并定义稳定化：

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

【讨论】：