allow dashed links #344
allow dashed links #344
Conversation
There was a problem hiding this comment.
Thanks for the PR! Looking forward to seeing this in the live sandbox in action. To check if your changes are producing the desired effect I would advise running npm run dev so that you can see the new properties in the configurations panel, and check whether they are producing the desired effect in the graph.
| @@ -524,6 +524,9 @@ const graph = { | |||
| This is how link strokeWidth will be calculated:`javascript strokeWidth += (linkValue * strokeWidth) / 10;` (optional, default `false`) | |||
| - `link.strokeWidth` **[number][181]** <a id="link-stroke-width" href="#link-stroke-width">🔗</a> 🔍🔍🔍 strokeWidth for all links. By default the actual value is obtain by the | |||
| following expression:`javascript link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value` (optional, default `1.5`) | |||
| - `link.strokeDasharray` **[string][183]** <a id="link-stroke-dasharray" href="#link-stroke-dasharray">🔗</a> 🔍🔍🔍 strokeDasharray for all links. | |||
There was a problem hiding this comment.
Please drop these changes. Documentation is only updated upon releasing a new version. You can reuse these lines of documentation to add it on graph.config.js
There was a problem hiding this comment.
Also please make sure to wrap each one of the properties (e.g. strokeDasharray) with a link to the respective MDN page. example:
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray">strokeDasharray</a>
This is extremely valuable for navigability and to make sure other developers don't mix this with something else.
| @@ -94,6 +94,9 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo | |||
| } | |||
|
|
|||
| let strokeWidth = (link.strokeWidth || config.link.strokeWidth) * (1 / transform); | |||
| let strokeDasharray = link.strokeDasharray || config.link.strokeDasharray; | |||
There was a problem hiding this comment.
Can we have const instead, for all these new variables?
| @@ -143,6 +146,9 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo | |||
| source, | |||
| stroke, | |||
| strokeWidth, | |||
| strokeDasharray, | |||
There was a problem hiding this comment.
These changes look good, but without adding the new configs to the graph.config we won't be able to use them.
Please make sure you change the graph.config.js with these new properties and add the proper default values for each one of them.
|
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. |
Closes #343
This little change gives the user more control on the appearance of the links, adding support for
stroke-dasharray,stroke-dashoffsetandstroke-linecapsvg attributes.As for already supported attributes, they can be defined on single links or globally.