minimal usage example in doc doesn't work properly

[StephanPraetsch]

trafficstars

Describe the bug The minimal example in docs isn't scaled properly and while zooming there are errors.

To Reproduce

nvm use 19
yarn create react-app my-app
cd my-app
yarn add d3
yarn add react-d3-graph

add minimal example from https://github.com/danielcaldas/react-d3-graph#minimal-usage-example so that src/App.js is

import './App.css';
import { Graph } from "react-d3-graph";

function App() {
// graph payload (with minimalist structure)
    const data = {
        nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
        links: [
            { source: "Harry", target: "Sally" },
            { source: "Harry", target: "Alice" },
        ],
    };

// the graph configuration, just override the ones you need
    const myConfig = {
        nodeHighlightBehavior: true,
        node: {
            color: "lightgreen",
            size: 120,
            highlightStrokeColor: "blue",
        },
        link: {
            highlightColor: "lightblue",
        },
    };

    const onClickNode = function(nodeId) {
        window.alert(`Clicked node ${nodeId}`);
    };

    const onClickLink = function(source, target) {
        window.alert(`Clicked link between ${source} and ${target}`);
    };

    return <Graph
        id="graph-id" // id is mandatory
        data={data}
        config={myConfig}
        onClickNode={onClickNode}
        onClickLink={onClickLink}
    />;
}

export default App;

Expected behavior A viewable and recognizable graph.

Screenshots there is a very small graph in the corner top left

if I hover the small green icon and scroll with mouse wheel then

Environment:

• Win11 + WSDL

System:
  Host: NB230092 Kernel: 5.15.90.1-microsoft-standard-WSL2 x86_64 bits: 64
    Desktop: N/A Distro: Ubuntu 22.04.3 LTS (Jammy Jellyfish)

• Firefox 115.4.0esr (64-bit) (runs on windows)
• other versions (run on wsdl)

my-app$ node --version
v19.9.0
my-app$ yarn --version
1.22.19
my-app$ grep -E "d3-graph@|^react@|^d3@" -A 1 yarn.lock 
d3@^7.8.5:
  version "7.8.5"
--
react-d3-graph@^2.6.0:
  version "2.6.0"
--
react@^18.2.0:
  version "18.2.0"

[jjnanthakumar]

+1

[skydtrtzmr]

yes, it also happens in this: https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel

it's an example of collapsible.

sometimes when you click on the parent node, the edges disappeared but the child nodes still exist