Update React-D3-Graph ViewBox

So I have a dataset called actors that holds my nodes and links called scratch that looks like this…

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

And I’m trying to make the graph show up on my react app when ran. The problem I’m having is that the viewbox is extremely small so I can’t use a much larger dataset without nodes going off the screen. I was wondering if there was a way to change the viewbox height and width to be certain values? Note: I’ve found that a viewbox={0 0 9000 9000} works for a larger dataset. Here is my code…

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;

Also, I’ve seen examples using div, however, I have another class called Navbar that shows at the top above the graph and it doesn’t like my Navbar with div.

Answer

So I figured out my problem. In my App.css file I only had

svg{
    background: #eee;
}

And I needed to have

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

Although it is extremely zoomed in so that’s something I need to look at.

Advertisement

Answer