Extract path generators from Link* components

[techniq]

After some discussion regarding using react-spring with vx, and for it to perform optimally (i.e. not involve React diffing during the animation), we would need to be able to pass the path data generator to it's template function (tag template function) and consider using it's <animated.path /> instead of just <path />

For example:

<animated.path d={template`$(pathGenerator(data))`} />

In order to support this (and without bringing react-spring as a dependency within our Link* components), we should export each generator within our Link components, such as this one for LinkHorizontalStep. We'll probably need to look at currying all the props with default values, something like:

const path = (
  x = d => d.y,
  y = d => d.x,
  source = d => d.source,
  target = d => d.target
  percent = 0.5,
) => (data) => {
    const sourceData = source(data);
    const targetData = target(data);

    const sx = x(sourceData);
    const sy = y(sourceData);
    const tx = x(targetData);
    const ty = y(targetData);

    const path =  d3Path();
    path.moveTo(sx, sy)
    path.lineTo(sx + (tx - sx) * percent, sy)
    path.lineTo(sx + (tx - sx) * percent, ty)
    path.lineTo(tx, ty)

    return path.toString();
  };

Regarding the exports, maybe they are the named exports from these files (all called path or pathGenerator)? Not sure how (and if we should) export them at the top level (i.e. what do we name them, etc).

These paths could also be useful outside of links (at one point I considered using them for annotations until I saw react-annotation. Could they also be used as custom curves for line graphs?

[drcmda]

To expose these functions would come in handy for any lib that can handle it (animated, react-spring, etc.) and allow VX to compete against plain d3-animations.

Just to illustrate what kind of difference it would make:

Letting React render an animation results in a full re-render of the entire subtree (in the example ~300 path components) on every frame, on top of re-styling and paints, making it pretty hard if not impossible to get 30-60fps without drops for bigger trees (avg for a single frame: 50-80ms):

Doing the animation in a raf-loop like d3 or animated would do results in a single render, from then on the animation is going to be applied directly in the dom (react-springs avg for a single frame: 15-20ms):