在 react-graph-vis 中激活操纵系统

Question

我正在使用 react-graph-vis to visualize networks. According to the vis.js documentation 我可以通过向 options 键提供适当的 manipulation 对象来打开操纵系统。我正在尝试向可视化 GUI 添加一个 Add Edge 按钮，这或多或少是我配置组件的方式：

class MyComponent extends React.Component {
   constructor(props) {
      var graph = /* initial graph */;
      this.state = {
         options: {
            manipulation: {
               enabled: true, initiallyActive: true, addEdge: true
            }
         },
         graph: graph
      }
   }

   render() {
      return <Graph graph={this.state.graph}, options={this.state.options}/>
   }
}

该组件呈现指定的 graph 但 GUI 中缺少操纵系统。也就是说，将 manipulation 条目添加到 options 根本没有效果。特别是，没有 edit 或 add edge 按钮，因此无法操作图形。我没有收到任何错误，问题很简单，就是操作系统没有被渲染。添加其他选项（例如与网络布局相关的选项）可以正常工作。只是manipulation这个选项好像没有设置。

Answer 1

确保导入 vis.js 样式表。执行此操作的方法取决于项目的设置。

您可以将其包含在来自 CDN 的 html 文件中：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis-network.min.css">

如果您使用的是 webpack，您可以通过将以下内容添加到 JavaScript 文件中来执行此操作：

import 'vis/dist/vis.css';

在 react-graph-vis 中激活操纵系统

Activating the manipulation system in react-graph-vis

reactjs

vis.js