Skip to content

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

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"

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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