I have a dataset named actors storing nodes and links called scratch. The structure is as follows...
{
"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"
}
]
}
I'm working on displaying this graph in my React app, but facing an issue with the small viewbox size, which limits larger datasets from fitting on screen. Is there a way to set specific height and width values for the viewbox? I found that using viewbox={0 0 9000 9000} works for larger datasets. Below is my code snippet...
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;
//Function to toggle node colors on click
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;
I've seen examples using div, but since I have another component called Navbar positioned above the graph, it doesn't work well together within a div.