Edge drawing docs/example

[mks-m]

Documentation is very scarce on how to treat edge points. Is there a clear example how to render an edge using SVG path element?

I've tried

<path d="M <p1> Q <p2> <p3> [T p4 T p5 ...]">

but it's just a wild guess and i assume there is a better (correct) way of doing it.

[GordonSmith]

FWIW I use d3-line to calculate the SVG path:

import { curveBasis as d3CurveBasis, line as d3Line } from "d3-shape";

...
        const line = d3Line()
            .x(function (d: any) { return d.x; })
            .y(function (d: any) { return d.y; })
            .curve(d3CurveBasis)
            // .tension(0.75)
            (points)
            ;

Where line is what you would set in the "d" attribute - this has the benefit of giving you several interpolation options...

[mks-m]

yeah, i wanted to avoid having to add d3 as a dependency, but even in general, if this library is producing some output - there should be a doc explaining what it is and how to use it (unless it's obvious).

my path example above is broken for edges with more than 3 points =/

[tomuxmon]

Anything new here? In my particular case, I draw lines on the canvas:

• Drawing a quadratic curve when there are 3 points.
• Drawing a bezier curve when there a 4 points.
• Drawing straight lines for 'anything else'.

'anything else' does not look nice 😞 Would appreciate the help.

[mclaudt]

After some experiments, I have concluded that these values are hardly meant to be consumed by <path> svg element directly in order to get smooth curves. Neither cubic nor quadratic Bezier curves did not look adequate with default T syntax.

Solved smoothing them using custom code with intermediate control points, according to the following recursive pseudocode: smooth(p1, p2, p3,...) => qbc(p1, p2, third(p2,p3)), smooth(third(p2,p3), p3, ...) where qbc(a,b,c) - quadratic Bezier curve third(a,b) - point at one-third from point a to point b

[davidlygagnon]

I agree with this issue, it would be great if there's more docs on how to use control points from dagre.js in a svg path element?

[theengineear]

I'm also trying to just use dagre and render the svg myself and finding the control points for edges hard to consume. It would be super helpful to be able to dump information into a path or line.

[mx2323]

yeah - what is a 'control point..?'

[ansavchenco]

Here is how I did it. Though it might be helpful.

export function GraphEdgeSvg({ edge }: GraphEdgeSvgProps) {
  const { points } = edge;

  const commands = [`M${points[0].x} ${points[0].y}`];
  for (let i = 1; i < points.length; i++) {
    commands.push(`L${points[i].x} ${points[i].y}`);
  }

  return (
    <path
      d={commands.join(' ')}
      fill="none"
      stroke="black"
      strokeWidth={2}
    />
  );
}