JoinTransition

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

  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

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

Default. Expect d3.interpolate as final argument.

To pick a set of properties from each object to interpolate, import { interpolatedPicked } from 'join-transition' and pass interpolate={interpolatedPicked(key1, key2, etc)}. The rest of the keys will be transferred directly from latest values.

• shouldTransition

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

Default. (Effectively required for mutated values.)

• queue

  queue={false}

Default. Set to true to schedule when transition in progress ends.

• duration

  duration={250}

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

• ease

  ease={d3.easeCubic}

Defaults to d3-transition default easing.

• onTransitionEnd

  onTransitionEnd={null}

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

• identify

  identify="id"

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

• enter/exit

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

Values to transition from/to when entering/exiting.

• stagger

  stagger={0}

Default. (0 <= stagger < 1). As a proportion of the duration, values' delays range from 0 to this value.

To transition values one after another, import { staggerInSeries } from 'join-transition' and pass stagger={staggerInSeries()}. Optionally pass a fractional overlap amount (defaults to 0).

• orderBy

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

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

Render

• children

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

Required. Child must be a function that renders the array of transitioning values, which is a union of previous and current values in order of: exiting, updating, entering.

</JoinTransition>