Блог

Главная - Вопросы по программированию - Как уместить или уменьшить изображение React.Сетевой график JS?

Как уместить или уменьшить изображение React.Сетевой график JS?

#reactjs #vis.js #react-graph-vis

#reactjs #vis.js #react-graph-vis

Вопрос:

Добрый вечер, у меня есть следующие настройки для моего сетевого графика:

 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?

Заранее спасибо

Комментарии:

1. Я пробовал этот способ, но он не сработал = <Graph graph={exceptionsGraph} options={options} getNetwork={network => network.fit()}/>

2. это та библиотека, которую вы используете? github.com/crubier/react-graph-vis

3. Да, @diedu, точно. Это библиотека.

4. вы пробовали autoResize option? visjs.github.io/vis-network/docs/network/index.html

5. Да, я это сделал, но с этим не повезло: (

Ответ №1:

Вам нужно вызвать функцию подгонки внутри стабилизированного события.

Объявить объект events и определить stabilized:

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