search

vasturiano / react-force-graph

React component for 2D, 3D, VR and AR force directed graphs
https://vasturiano.github.io/react-force-graph/example/large-graph/
MIT License
2.2k stars 284 forks source link

Q: Increasing distance between nodes #367

Closed df5118 closed 2 years ago

df5118 commented 2 years ago

I know this has been has been brought up in #107 and #127, but I was wondering if anyone could clarify what was meant in the answer. It was said you simply do .d3Force('link').distance(link => /* your code */) or, as was mentioned in the question of #107 use: this.fg.d3Force What is 'this' supposed to refer to, and what has method .d3Force that is being accessed? Thanks for any advice you can give :-)

vasturiano commented 2 years ago

@df5118 thanks for reaching out.

d3Force is a component method, not prop. That means it needs to be accessed via component refs, as in this example: https://github.com/vasturiano/react-force-graph/blob/master/example/collision-detection/index.html#L34

df5118 commented 2 years ago

Thank you for the response. That is very clear now :-)

anton-x-t commented 2 weeks ago

So to do this completely for React: npm i d3 d3-force npm i @types/d3 --save-dev

import * as d3 from "d3-force";
...
ForceGraph()
  ...
  .d3Force('link', d3.forceLink()
          .distance(60))
  ...

Sources: How to make different links of different size ? #107,
thank you Vasco Asturiano,
https://github.com/vasturiano/react-force-graph/issues/107#issuecomment-517140737

Cannot find module d3 or its corresponding type declarations #2362,
thank you Moritz Klack,
https://github.com/xyflow/xyflow/issues/2362#issuecomment-1214879301

How do you customize the d3 link strength as a function of the links and nodes counts ? (d3 v4),
thank you duncdrum,
https://stackoverflow.com/a/39389846

Importing d3 in react JS component file,
thank you marielle,
https://stackoverflow.com/a/64906943