Links labeling

[dmh126]

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:

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]

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.

[StevenLangbroek]

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]

@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 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]

Need this

[danielcaldas]

Closing with #178. Will go on next release.