Support additional link types

[techniq]

Creating a separate issue to track, mentioned in #172.

It would be nice to support more link types, similar to vega (see tree example, radial tree example), such as:

Orthogonal

• Useful for brackets
• Another example
  

Curve

• example
  
  

also possible

Elbow (45deg)

• example
• useful for annotations / call outs
  

Implementation

I'm not sure if all of these should be separate components like LinkHorizontal, LinkVertical, and LinkRadial (LinkHorizontalOrthogonal ?) or by adding a type prop (or something) such as <LinkHorizontal type="orthogonal" /> where type could be line, diagonal, curve, orthogonal, elbow, etc.

I took a quick look at how vega supports the different linkpath types, which are implemented using simple svg path line/curve commands. I envisioned doing something similar, and is typically how I see other d3 implementations, although this would break canvas support (d3 uses it's context to abstract the canvas/svg from my understanding. It looks like there is an open issue on d3-shape to add orthogonal support, but there hasn't been any response to the original request.

Personally I've only ever used svg with d3, so I would be fine with only support svg. Thinking more about it, I don't see how a react wrapper could produce canvas, except using react-konva or react art.

[techniq]

Looking at d3-shape's curveStep looks to possibly give us a context-agnostic way to create an orthogonal link. Some useful examples to visualize other curve types:

• https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529
• http://bl.ocks.org/d3indepth/b6d4845973089bc1012dec1674d3aff8
• https://cemrajc.github.io/d3-curve-comparison/

While curveStep is probably what we would want for an orthogonal link, I could see benefit in curveStepAfter and curveStepBefore. Not sure if we would also need a separate horizontal vs vertical version.

[techniq]

@hshoff: some progress https://codesandbox.io/s/n3w687vmqj

Current using <LinkStep />, <LinkStep before /> and <LinkStep after /> although I'm not sure how this should be exposed once we have radial examples like in the original comment (LinkRadialStep?)

[techniq]

@hshoff Take a look at https://n3w687vmqj.codesandbox.io/

We now have step, curve, line, and the existing "diagonal" link types for both cartesian and polar layouts and horizontal or vertical orientations.

I broke them out as Link{Layout}{Type} components, for example LinkVerticalCurve, LinkHorizontalCurve, and LinkRadialCurve similar to our LinkVertical, LinkHorizontal, and LinkRadial.

I'm going to try to find some more time to knock out the elbow type, but I'm pretty happy where things are if not.

[hshoff]

@techniq wow! looks great, would love to add these to vx

[techniq]

I've been buried at work lately but I'll try to get a PR soon. I started on the elbow type but having trouble getting the math right. I'll probably wait to implement it until I get a PR for the others out.