Javascript 更新React-D3-Graph视图框

所以我有一个名为actors的数据集，它保存了我的节点和名为scratch的链接，看起来像这样

{
  "nodes": [
    {
      "id": "Guardians of the Galaxy"
    },
    {
      "id": "Chris Pratt"
    },
    {
      "id": "Vin Diesel"
    }
  ],
  "links": [
    {
      "source": "Guardians of the Galaxy",
      "target": "Chris Pratt"
    },
    {
      "source": "Guardians of the Galaxy",
      "target": "Vin Diesel"
    }
  ]
}

当我运行react应用程序时，我正试图让图表显示在我的react应用程序上。我遇到的问题是viewbox非常小，因此如果没有节点离开屏幕，我无法使用更大的数据集。我想知道是否有办法将viewbox的高度和宽度更改为特定值？注意：我发现viewbox={0 0 9000}适用于更大的数据集。 这是我的密码

import React, { useRef, Component }  from "react";
import Navbar from "./components/Navbar"
import './App.css';
import { Graph } from "react-d3-graph";
import { BrowserRouter as Router } from 'react-router-dom'
import myData from './Data/scratch.json'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: myData,
            width: 9000,
            height: 9000,
            svgRef: useRef
        };
    }

    render() {
        const myConfig = {
            nodeHighlightBehavior: true,
            node: {
                color: "green",
                size: 120,
                highlightStrokeColor: "blue"
            },
            link: {
            }
        };

        let svgRef = this.state.svgRef;


//Used to change the color of the nodes when clicked
        const OnClickNode = function (nodeName) {
            let modData = {...svgRef.state.data};
            let selectNode = modData.nodes.filter(item => {
                return item.id === nodeName;
            });
            selectNode.forEach(item => {
                if (item.color && item.color === "red") item.color = "green";
                else item.color = "red";
            });
            svgRef.setState({data: modData});
        };



        //.attr("viewBox", "0 0 300 300")
        //.attr("viewBox", "0 0 9000 9000")
        return (
            <Router>
                    <Navbar />
                    <Graph
                        id="graph-name" // id is mandatory, if no id is defined rd3g will throw an error
                        data={this.state.data}
                        viewBox={"0 0 500 500"}
                        height={this.state.height}
                        config={myConfig}
                        onClickNode={OnClickNode}
                 >
                    </Graph>
            </Router>
        );
    }
}
export default App;

import React，{useRef，Component}来自“React”；
从“/components/Navbar”导入导航栏
导入“/App.css”；
从“react-d3-Graph”导入{Graph}；
从“react Router dom”导入{BrowserRouter as Router}
从“./Data/scratch.json”导入myData
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：myData，
宽度：9000，
身高：9000，
svgRef:useRef
};
}
render（）{
常量myConfig={
nodeHighlightBehavior:true，
节点：{
颜色：“绿色”，
尺寸：120，
highlightStrokeColor：“蓝色”
},
链接：{
}
};
设svgRef=this.state.svgRef；
//用于在单击时更改节点的颜色
const OnClickNode=函数（nodeName）{
让modData={…svgRef.state.data}；
让我们选择node=modData.nodes.filter（项=>{
return item.id==节点名；
});
选择node.forEach（项目=>{
如果（item.color&&item.color==“红色”）item.color=“绿色”；
else item.color=“红色”；
});
setState（{data:modData}）；
};
//.attr（“视图框”，“0 0 300”）
//.attr（“视图框”，“0 0 9000”）
返回(
);
}
}
导出默认应用程序；

---

此外，我还看到了使用div的示例，但是，我有另一个名为Navbar的类，它显示在图表上方，它不喜欢使用div的Navbar。因此我解决了我的问题。在我的App.css文件中，我只有

svg{
    background: #eee;
}

我需要有

svg {
  min-width: 1863px;
  min-height: 800px;
  max-height: 9000px;
  max-width: 9000px;
  background: #eee;
}

虽然它是非常放大，所以这是我需要看的东西