JSPM

import JoinTransition from 'join-transition'

<JoinTransition

React Component wrapping d3.transition().tween(...) with a data join mechanism inspired by d3-selection but operating on generic data structures. npm install join-transition

  values={[value1, value2, etc]}

Required. Values to render, transitioning from previous values on subsequent renders. For transitioning a set, values should be an array, but otherwise it will be treated as a single value.

  interpolate={(a, b, interpolate) => interpolate(a, b)}

Default. Expect d3.interpolate as final argument.

  shouldTransition={(a, b) => a !== b}

Default. (Effectively required for mutated values.)

  duration={250}

Defaults to d3-transition default duration. Length of all values' transition (not each).

  ease={d3.easeCubic}

Defaults to d3-transition default easing.

Props applicable for transitioning sets (i.e. arrays)

  identify="id"

Default. String or function. Key for constancy (c.f. key argument to d3-selection data method)

  enter={d => { ...d, etc }}
  exit={d => { ...d, etc }}
  // or: enterOrExit={d => { ...d, etc }}

Values to transition from/to when entering/exiting.

  stagger={0}

Default. Longest delay time (ms). Must be less than duration.

  orderBy={(d, i) => i}
>

Default. Determines stagger delay time (relative to other values).

Render

{
  transitioningValues =>
    <g>{transitioningValues.map(value => <circle {...value} />)}</g>  // ... for example
}

Required. Child must be a function that renders the array of transitioning values (in order of: exiting, updating, entering).

</JoinTransition>