Custom link between two nodes?

[eilatc]

Is it possible to create a custom link between two nodes?

Let's say all the links in the graph are green except one that is blue and dashed...

Thanks

[danielcaldas]

In nodes, some properties can be defined within the node itself (e.g node.color) property.

Regarding links, I'm afraid that is not yet possible but I will definitely add it to the roadmap as it seems a pretty obvious feature.

[danielcaldas]

In this PR #79 we made it possible to customize color for links via link data payload @eilatc

[paulbarr]

I'm interested in the ability to have dashed lines and dashed nodes.
I'd be happy to do a PR for it
Also - I'm wondering if you could support pass through so that any property would be added to the path, like strokeDasharray for example. Then you could support all the d3 capabilities
I'm available tomorrow but after that will be out until the new year

[danielcaldas]

Hey there @paulbarr we could start with the ability to add dashed line option. A PR would be very welcome just try and apply the same pattern that we have for link.color for instance.

[paulbarr]

I've made the change locally - I'll submit the PR in the new year when I get back. Happy New Year!

[mariopnvds]

Hey there! I am new using this amazing tool. Is there any possibility to set the thickness of each link individually? I mean something like:

links: [
            { source: 'Harry', target: 'Sally', width: 3 }
]

Thank you so much!

[danielcaldas]

Hey @mariopnvds thanks to @sauln it will be possible soon! Check out the ongoing work here #166

[sauln]

I think using the semanticStrokeWidth and linksMatrix parameters could solve the problem. If not, I could include the link width param in #166 as well.

[mariopnvds]

Thank you very much @sauln and @danielcaldas !

Where should I use linksMatrix? I tried to look for it on the docs and it is not appearing. I tried to use it in the configs and in the individual link, and still not working!

Would be nice to have it with the width param for each link!

Thanks in advance!

[sauln]

Sorry, the linksMatrix is an internal representation of the widths. I got it to work by setting links to have a value attribute:

links: [
            { source: 'Harry', target: 'Sally', value: 3 }
]

and then setting link.semanticStrokeWidth = true.

It also looks like this will behave differently if collapsible is turned on.

If that doesn't work, once #166 is merged, it will be accessible by setting

links: [
            { source: 'Harry', target: 'Sally', strokeWidth: 3 }
]

[wendymungovan]

I found a workaround if you are ok with all lines being dashed. You can set the css properties for the link class.

.link{
stroke-dasharray: 5;
stroke-width: 5;
stroke-linejoin: round;
}

[danielcaldas]

Hey thanks for the addition @wendymungovan, that's actually not a bad workaround 👍

[wendymungovan]

What do you think about exposing the className on link as a Link config property? This could be added to the class name you are already setting in buildLinkProps in graph.builder.js. I tried it out in the branch and it seems to work if you like that style change. @danielcaldas if you would like this done differently let me know and I can fix it.

I tried it out and it ends up looking like this.

.dottedLink{
stroke-dasharray: 5;
stroke-width: 5;
stroke-linejoin: round;
stroke: blue !important;
}
in the data:
{
source: 0,
target: 2,
className: 'dottedLink',
},
{
source: 0,
target: 3,
className: 'dottedLink',
},...

[danielcaldas]

@wendymungovan sounds good, feel free to give it a try by adding className. Also, consider that we should have a default value for this on graph.config.js.

[wendymungovan]

@danielcaldas I set the default to undefined. Here is a link to the branch.Barnstorm-Research@6e1fd86 I just realized that my playing around with the arrows was included in this branch so I will remove that change.

[WenxuanHu35]

Hi, guys

Is there a concern to not making all the "Link level configurations" documented to be configurable for each link? I really like the idea of per link level customization and I saw you guys first added link.color, then link.width, now dash-line. And my use case would be link.type. I am not an expert in d3/react but I noticed the current implementation for link type depends on graph config.

Let me justify my use case a little bit. I would like to render a graph with some links represent close/direct connection using straight lines while others represent distanced/indirect connection using curved links. The graph would be more cleared in case links are dense and overlapping one another.

Thanks

[danielcaldas]

Hello, @WenxuanHu35 this was an architectural decision that I did in the beginning of the project:

1. All configs have as base/fallback source of truth a config in graph.config.js
2. As long as the project is growing and the community requests something to beat link level we can simply go to our builder methods and shift the priorities of the source of truth to the link or node itself, but always falling back to the graph.config because all this link and node level configs are totally optional from a client-side perspective 🙂

So image now that we want to make the className property configurable at link or node level. What we need to do is simply going to our graph.builder and add the following line of code:

...
className: link.className || CONST.LINK_CLASS_NAME,
...

But of course, if nobody would request this, there is no point in impacting the performance of the library to do additional checks that in the end are never used 🙂.