drrr v0.0.4

DR³

Helpers for using D3 in a declarative way within React. See the blog for the motivation and more examples.

This project is not supported or endored by the D3 project.

License

This project contains both original and derived works and is licensed under the BSD 3-Clause license. See the license file for the full details.

Derived works

• d3-axis Copyright 2010-2016 Mike Bostock BSD 3-Clause

Install

yarn add drrr
#or
npm install --save drrr

There is a peer dependencies on react.

API

animateWithEase

import { animateWithEase } from 'drrr';

This higher-order component allows the data used on a chart to be animated using an easing function.

Definition:

animateWithEase(WrappedComponent, animationConfig);

WrappedComponent is your chart component that you want to animate.

animationConfig provides some options for the animation, it is structured as:

{
  // A function to perform the easing: function(data, t)
  easeData: PropTypes.func.isRequired,
  // The duration (in ms) of the animation
  duration: PropTypes.number.isRequired,
  // The original data that we want to animate
  data: PropTypes.any.isRequired,
  // The name of the prop to pass data to WrappedComponent, will default to 'data'
  dataPropName: PropTypes.string,
  // Animation starting delay (in ms) after mounting
  delay: PropTypes.number,
  // The interval (in ms) for when function easeData will get called
  interval: PropTypes.number.isRequired,
}

Example

A basic example to perform easing on a Bar chart component using D3's easeCubicInOut easing function.

const easeData = (data, t) => {
  return data.map(x => ({
    letter: x.letter,
    frequency: x.frequency * easeCubicInOut(t),
  }));
};

export default animateWithEase(Bar, {
  easeData,
  duration: 500,
  delay: 500,
  interval: 10,
  data: originalData,
});

Axis

import { Axis } from 'drrr';

This component is a port of d3-axis which doesn't require using ref and DOM manipulations.

Definition:

<Axis {...props} />

props are defined as:

{
  orientation: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired,
  scale: PropTypes.func.isRequired,
  tickFormat: PropTypes.object,
  tickArguments: PropTypes.array,
  tickPadding: PropTypes.number,
  tickSize: PropTypes.number,
  tickSizeInner: PropTypes.number,
  tickSizeOuter: PropTypes.number,
  tickValues: PropTypes.array,
}

Where the individual properties are:

• orientation this replaces Replaces d3.axisTop, d3.axisRight, etc.
• scale The D3 scale that you would normally use in d3.axisTop(scale).
• tickFormat see D3 documentation
• tickArguments see D3 documentation
• tickPadding see D3 documentation
• tickSize see D3 documentation
• tickSizeInner see D3 documentation
• tickSizeOuter see D3 documentation
• tickValues see D3 documentation

Any other props that you pass in such as className will be applied to the root <g/> in the rendered Axis component.

Note: There is no direct propety for axis.ticks, instead wrap the arguments in an array and use the tickArguments property.

Example

<g>
  <Axis
    orientation="bottom"
    scale={x}
    className="axis axis--x"
    transform={`translate(0, ${height})`}
  />

  <Axis orientation="left" scale={y} tickArguments={[10, '%']} />
</g>