Skip to content

minimal usage example in doc doesn't work properly #565

Open
@StephanPraetsch

Description

@StephanPraetsch

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
grafik

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

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"

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions