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

Links labeling #47

Closed
dmh126 opened this issue Jan 26, 2018 · 6 comments

Comments

@dmh126
Copy link

@dmh126 dmh126 commented Jan 26, 2018

Hello!
Is there any possibility to add labels to links? I'd like to have structure like that:

links: [
    {source: x, target: y, relationship: "xxx"}
]

And I want to create something like I have in my neo4j browser:
relationships

If not label, at least I'd like to have different colors, like we can do with nodes, simply by adding "color: value" to the node object.

If there are no plans for features like that, maybe some tips how I can implement them?

@danielcaldas

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Jan 26, 2018

Hello @dmh126!

These are two different feature requests, I'll tell you what you need to know about it:

1 - Adding a label - Regarding this one, it may be difficult to implement this at this moment, still it would be a nice capability to add on rd3g. You could have something like what you suggested and in the Link component expose that label, something like this example.

2 - This is especially achievable, a small change to the API similar to what you mentioned for the label would be required though, the steps would be:

2.1 Change the API adding colour (highlightColor could also be added) to link level:

links: [
    {source: x, target: y, color: "xxx"}
]

2.2 In graph/helper.jsx pass down this prop if existent when building links props L79

    const color = link.color || config.link.color;
    let stroke = color;

    if (highlight) {
    ...
    }

TL;DR - 2 is achievable in short-term and 1 is not.

@stale stale bot added the wontfix label Feb 15, 2018
Repository owner deleted a comment from stale bot Feb 15, 2018
@stale stale bot removed the wontfix label Feb 15, 2018
@StevenLangbroek

This comment has been minimized.

Copy link

@StevenLangbroek StevenLangbroek commented Mar 8, 2018

I'm struggling to find integration points for this library, imho this would ideally work something like this:

given links:

links: [
    {source: x, target: y, color: "xxx"}
]

expose a renderLink prop on the main Graph object:

<Graph
	data={data}
    renderLink={(link) => {
        const { x, y, transform, color } = link; // where x, y and transform are injected by r3dg
        return <g><line {...link} /><text offset={x} transform={transform} color={color} /></g> // pseudo code
    }}
/>

Thoughts?

@danielcaldas

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Mar 26, 2018

@StevenLangbroek I see what you mean there, still, the whole concept of react-d3-graph is for you not to need to care about how svg elements are built, thus they are abstracted in this library. For this to work properly we need two things:

1. Allow clients to unitarily define links and nodes [Out of scope in this Issue]
At the moment some props that you pass into the Graph component in config object are applied globally, i.e. if you define a color in config.link.color: 'green' then all links will be green. You cannot at the moment pass a color per link, it is a limitation of the current state of the library. You can do that with nodes though.

2. Pass text prop within links and render it
Allow clients to pass in data payload along with each node a text label that rd3g will render
in the links if requested by the client, i.e by turning on a new config that should be implemented such as
config.link.renderLabel.

Hope this clears it out a bit.

Cheers!

@stale

This comment has been minimized.

Copy link

@stale stale bot commented Apr 25, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@aishwat

This comment has been minimized.

Copy link

@aishwat aishwat commented Dec 24, 2018

Need this

@stale stale bot added the wontfix label Feb 7, 2019
Repository owner deleted a comment from stale bot Feb 10, 2019
@danielcaldas

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Mar 4, 2019

Closing with #178. Will go on next release.

Repository owner locked as resolved and limited conversation to collaborators Sep 26, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
4 participants
You can’t perform that action at this time.