Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
StephanPraetsch opened this issue Oct 30, 2023 · 2 comments
Open

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

StephanPraetsch opened this issue Oct 30, 2023 · 2 comments

Comments

@StephanPraetsch
Copy link

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"
@jjnanthakumar
Copy link

+1

@skydtrtzmr
Copy link

skydtrtzmr commented Jun 13, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants