更新 React-D3-Graph 视图框答案

【问题标题】：Update React-D3-Graph ViewBox更新 React-D3-Graph 视图框
【发布时间】：2021-04-17 22:45:29
【问题描述】：

所以我有一个名为 actor 的数据集，其中包含我的节点和链接，称为从头开始，看起来像这样......

{
  "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"
    }
  ]
}

我正在尝试让图表在运行时显示在我的反应应用程序上。我遇到的问题是视图框非常小，所以我不能在没有节点离开屏幕的情况下使用更大的数据集。我想知道是否有办法将视图框的高度和宽度更改为特定值？注意：我发现 viewbox={0 0 9000 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;

此外，我也看到了使用 div 的示例，但是，我还有另一个名为 Navbar 的类显示在图表上方，它不喜欢我的带有 div 的导航栏。

【问题讨论】：

标签： javascript css reactjs d3.js

【解决方案1】：

所以我发现了我的问题。在我的 App.css 文件中，我只有

svg{
    background: #eee;
}

我需要拥有

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

虽然它非常放大，所以我需要看看。

【讨论】：