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";varReact=require('react');varReactDOM=require('react-dom');varAnimation=require('../../lib/index').Animation;// Example(function(){varContainer=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><buttononClick={this.onClick}>toggle</button><Animationwidth={this.state.width}height={this.state.height}color={this.state.color}data={this.state.dataSet}>{function(state){return(<divstyle={{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