react-d3/react-d3-animation

Name: react-d3-animation

Owner: react-d3

Description: animating react-d3 components

Created: 2015-12-16 05:40:52.0

Updated: 2017-12-14 15:25:59.0

Pushed: 2016-03-20 12:04:30.0

Homepage:

Size: 1014

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-d3-animation

Animation component in react-d3.

Sample

Line Chart

Support animate type

• color
• string
• array
• object

Settings

• ease
• duration
• fps
• delay

Example

 strict";

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

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

xample
ction() {
r 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>
  )
}


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

License

Apache 2.0