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

Question

我正在使用react-graph-vis可视化网络。根据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}/>
   }
}

该组件呈现指定的图形，但 GUI 中缺少操纵系统。也就是说，将 manipulation 条目添加到 options 根本没有任何效果。特别是，没有编辑或添加边缘按钮，因此无法操作图形。我没有收到任何错误，问题只是操纵系统没有被渲染。添加其他选项(例如与网络布局相关的选项)可以正常工作。只是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';