Question

我正在使用react-graph-vis库来构建一个应用程序来演示节点的数据结构以及它们如何相互链接。

我已经完成并运行良好，但现在我想对它进行一些自定义。

这就是我目前所拥有的：

import React from 'react';
import Graph from 'react-graph-vis';

const graph = {
  nodes: [
    { id: 1, label: 'One', color: 'blue' },
    { id: 2, label: 'Two', color: 'red' },
  ],
  edges: [
    { from: 1, to: 2 },
  ],
};

const options = {
  edges: {
    color: 'black',
  },
  layout: {
    hierarchical: false,
  },
};

const events {
  select({ nodes, edges }) {
    console.log('Selected Nodes:', nodes);
    console.log('Selected Edges:', edges);
  },
};

const MyGraph = () => (
  <Graph graph={graph} options={options} events={events} />
);

现在正如我所提到的，这很有效！

但是我想自定义节点的那种风格。而且我想做一些非常先进的东西。有没有办法为节点设置自定义React组件？

如果是，怎么样？我可以通过options或graph nodes吗？

进行设置

这样的东西？

const graph = {
  nodes: [
    { id: 1, label: 'One', component: <MyCustomComponent label="One" /> },
    { id: 2, label: 'Two', component: <MyCustomComponent label="Two" /> },
  ],
  edges: [
    { from: 1, to: 2 },
  ],
};

非常感谢帮助！：）

如何在VisJS中为节点使用自定义React组件？

0 个答案: