Javascript Vis网络与React的集成问题

这里有没有人在任何项目中使用或曾经使用过Vis.js？我试图将Vis网络与React集成，我甚至成功地做到了，但我无法以任何方式操纵它

在Vis.js本身提供的示例中，它们使用同一html页面中的javascript代码生成画布。在React中，我创建了一个VisNetwork组件，并在App.js中调用它进行测试。我甚至成功地生成了这个图像，它确实出现了，但我无法操纵它

例如，的画布区域​​示例为600x400（示例链接），但React生成的画布区域为500x150。通过App.css，我可以改变之前100%使用的宽度，但高度无法控制。不管怎样，我把代码留在这里

network.js

import React, { Component, createRef } from "react";
import { DataSet, Network } from 'vis-network/standalone/umd/vis-network.min';

// Create an array with nodes
const nodes = new DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
]);

// Create an array with edges
const edges = new DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
]);

// Provide the data in the vis format
const data = {
  nodes: nodes,
  edges: edges
};

const options = {
    autoResize: true,
    height: '100%',
    width: '100%'
};

// Initialize your network!
class VisNetwork extends Component {
  constructor() {
    super();
    this.network = {};
    this.appRef = createRef();
  }

  componentDidMount() {
    this.network = new Network(this.appRef.current, data, options);
  }

  render() {
    return (
      <div ref={this.appRef} />
    );
  }
}

export default VisNetwork;

.App {
  text-align: center;
  width:500px;
  height:500px;
  border:solid;
  background-color:white;
}

---

请不要在没有回复的情况下否定这篇文章。这是弊大于利。谢谢。

我建议将选项宽度和高度设置为100%不起作用的原因是网络连接在未定义高度和宽度的div上，因此您可以尝试以下代码：

const options = {
  autoResize: ture,
  height: '100%',
  width: '100%'
};

// Initialize your network!
class VisNetwork extends Component {
  constructor() {
  super();
  this.network = {};
  this.appRef = createRef();
}

componentDidMount() {
  this.network = new Network(this.appRef.current, data, options);

}




render() {

let containerStyle = {  //define container width and height.
   width:"500px",
   height:"500px",  
}

return (
   <div style={containerStyle} ref={this.appRef} />   
);
}
}

export default VisNetwork;

const选项={
自动调整大小：是的，
高度：“100%”，
宽度：“100%”
};
//初始化你的网络！
类网络扩展组件{
构造函数（）{
超级（）；
this.network={}；
this.appRef=createRef（）；
}
componentDidMount（）{
this.network=新网络（this.appRef.current、data、options）；
}
render（）{
让containerStyle={//定义容器的宽度和高度。
宽度：“500px”，
高度：“500px”，
}
返回(
);
}
}
导出默认网络；

---

如果上面的代码不起作用，我建议使用

this.network.setSize（width，height）

强制更改画布。

另一种解决方法是创建一个常量，该常量采用DOM的高度大小，并将该常量设置为选项的高度

const myHeight = Math.round(parseInt(window.innerHeight) * 0.7) + 'px';

const options = {
    autoResize: true,
    height: myHeight
};

---

因此，可以控制百分比。

我建议您不要在选项中设置高度和宽度100%，将它们指定为px，例如：const options={autoResize:true，height:'500px'，width:'500px'}；我在选项中定义了高度“100%”和宽度“100%”，但同样的错误不是100%，而是将它们设置为number+px，比如500px。如果我只能使用px，如何使画布响应？我实际上没有使用这个Vis.js库，但我已经读过它的文档。所以，我可能错了。

const myHeight = Math.round(parseInt(window.innerHeight) * 0.7) + 'px';

const options = {
    autoResize: true,
    height: myHeight
};