Open
Description
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"
Metadata
Metadata
Assignees
Labels
No labels