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

Is there an example of displaying a label on a link in ForceGraph2D? #515

Open
NB3025 opened this issue May 14, 2024 · 1 comment
Open

Comments

@NB3025
Copy link

NB3025 commented May 14, 2024

I am using ForceGraph2D.
And I'm using curves to connect the nodes.
I want to display the link label in the center of the curve.
Could there be an example for this?
I can only find examples for ForceGraph3D.

example/text-links/index-3d.html

I made the following changes based on this, but it doesn't work

<ForceGraph2D
                ref={fgRef}
                graphData={{ nodes, links }}
                linkCurvature="curvature"
                nodeLabel="id"
                nodeAutoColorBy="group"
                onNodeClick={handleClick}
                linkThreeObjectExtend={true}
                linkThreeObject={link => {
                    // extend link with text sprite
                    const sprite = `${link.source} > ${link.target}`;
                    sprite.color = 'lightgrey';
                    sprite.textHeight = 1.5;
                    return sprite;
                }}
                linkPositionUpdate={(sprite, { start, end }) => {
                    const middlePos = Object.assign(...['x', 'y'].map(c => ({
                        [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
                    })));

                    // Position sprite
                    Object.assign(sprite.position, middlePos);
                }}
@vasturiano
Copy link
Owner

@NB3025 if you're using the 2D mode, you need to implement linkCanvasObject instead of linkThreeObject (that's 3D specific).

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

2 participants