激活反应图可视化中的操作系统

Question

我正在使用react-graph-vis来可视化网络。根据 vis.js 文档，我可以通过向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';