react-d3-animation

Animation component in react-d3.

Sample

Line Chart

## Support animate type

• color
• string
• array
• object

Settings

• ease
• duration
• fps
• delay

Example

"use strict";

var React = require('react');
var ReactDOM = require('react-dom');

var Animation = require('../../lib/index').Animation;

// Example
(function() {
  var Container = React.createClass({
    getInitialState: function() {
      return{
        width: 100,
        height: 100,
        dataSet: {
          x: 0,
          y: 0
        },
        color: 'red'
      }
    },

    onClick: function() {
      this.setState({
        dataSet: this.state.dataSet.x === 0 ? {
          x: 100,
          y: 100
        }: {
          x: 0,
          y:0
        },
        width: this.state.width === 100 ? 200: 100,
        height: this.state.height === 100 ? 200: 100,
        color: this.state.color === 'red' ? 'green': 'red'
      })
    },

    render: function() {
      return (
        <div>
          <button onClick={this.onClick}>toggle</button>
          <Animation
            width= {this.state.width}
            height= {this.state.height}
            color= {this.state.color}
            data= {this.state.dataSet}
          >
            {function(state) {
              return (
                <div style= {{width: state.width, height: state.height, backgroundColor: state.color}}>
                  x: {state.data.x} <br/>
                  y: {state.data.y}
                </div>
              )
            }}
          </Animation>
        </div>
      )
    }
  })

  ReactDOM.render(
    <Container/>
  , document.getElementById('blank-animate')
  )

})()

License

Apache 2.0