Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract path generators from Link* components #263

techniq opened this Issue Apr 4, 2018 · 1 comment


None yet
2 participants
Copy link

techniq commented Apr 4, 2018

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 =>
  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?


This comment has been minimized.

Copy link

drcmda commented Apr 5, 2018

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):

screen shot 2018-04-05 at 15 42 00

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):

screen shot 2018-04-05 at 15 42 11

@hshoff hshoff closed this in #265 Apr 8, 2018

hshoff added a commit that referenced this issue Apr 8, 2018

Merge pull request #265 from hshoff/harry-paths
[shape] export link path generators, Link* use additonalProps. fixes #263
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.