Is your feature request related to a problem? Please describe. I

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Link offsets? about force-graph HOT 1 OPEN

tomkcook commented on May 26, 2024

Link offsets?

from force-graph.

Comments (1)

vasturiano commented on May 26, 2024

@tomkcook thanks for reaching out.

I'd recommend looking into the linkCanvasObject method. This will allow you to specify a custom way to draw the links using canvas operations. That way you can add your own logic that offsets the lines and/or do any other transformations as needed.

If it's useful here's how the module does the drawing by default:

force-graph/src/canvas-force-graph.js

Lines 240 to 249 in a25a47e

 const start = link.source; 

 const end = link.target; 

 if (!start || !end || !start.hasOwnProperty('x') || !end.hasOwnProperty('x')) return; // skip invalid link 

 ctx.moveTo(start.x, start.y); 

 const controlPoints = link.__controlPoints; 

 if (!controlPoints) { // Straight line 

 ctx.lineTo(end.x, end.y);

You should only need to invoke two Canvas commands: moveTo and lineTo.

from force-graph.

Related Issues (20)

Formatting Node labels (not the hovering label) Force-graph 2D; ReactJS HOT 2
Units tests
Adding a higlight on children nodes effect ( inifinite loop bug in forceGraph )
When set fixed position for nodes after dragging, at some point nodes start floating very far from the fixed nodes (Image + Video)) HOT 1
Question about handling onNodeClick function HOT 1
Bad performance on Android
Conditional node styling based on data values/accessor method (i.e. circles for person, squares for place) HOT 2
mousedown event not working after adding it HOT 2
How to conditionally change linkLineDash between nodes HOT 1
Curved arrows HOT 2
How to draw nodes around a circle HOT 2
How to avoid collisions of nodes. HOT 1
Problems with labels, and dragging when openin from Brave browser with shield on. HOT 1
Conditional in linkDirectionalParticles does not use correct return value HOT 1
Option to always show node labels HOT 2
How to implement incremental graphData update on zoom and pan? HOT 4
[Bug]: When nodes are rapidly dragged multiple times in succession, it will be recognized as dragging the canvas
Discrepency between .json files used in demo and syntax on README HOT 2
Detecting right click when mouse is moving

Link offsets? about force-graph HOT 1 OPEN

Comments (1)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	const start = link.source;
	const end = link.target;
	if (!start \|\| !end \|\| !start.hasOwnProperty('x') \|\| !end.hasOwnProperty('x')) return; // skip invalid link

	ctx.moveTo(start.x, start.y);

	const controlPoints = link.__controlPoints;

	if (!controlPoints) { // Straight line
	ctx.lineTo(end.x, end.y);