Skip to content
A proof of concept exploration of using d3js transitions in a React visualization.
Branch: master
Clone or download
Latest commit 71c8885 Mar 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Update to use CRA Jan 14, 2018
src tweak Oct 22, 2018
.gitignore Update to use CRA Jan 14, 2018
LICENSE Update LICENSE May 8, 2017
README.md Update readme Jul 19, 2016
package.json Add deploy stuff Mar 24, 2019
typing.gif Update readme Jul 19, 2016
yarn.lock Add deploy stuff Mar 24, 2019

README.md

React d3 enter/exit animations

Gif of end result

This is a proof of concept implementation of declarative enter-update-exit transitions built with React and d3js.

The main FancyText component's render method is completely declarative. It renders Letters using a naive loop.

    render() {
        let transform = `translate(${this.props.x}, ${this.props.y})`;

        return (
            <g transform={transform}>
                <ReactTransitionGroup component="g">
                    {this.state.alphabet.map((d, i) => (
                        <Letter d={d} i={i} key={`letter-${d}`} />
                     ))}
                </ReactTransitionGroup>
            </g>
        );
    }

Each Letter component then uses lifecycle hooks from ReactTransitionGroup to do transitions.

class Letter extends Component {
    state = {
        y: -60,
        className: 'enter',
        fillOpacity: 1e-6
    }

    componentWillEnter(callback) {
        // start enter transition, then callback()
    }

    componentWillLeave(callback) {
        // start exit transition, then callback()
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.i != nextProps.i) {
            // start update transition
        }
    }

    render() {
        return (
            <text dy=".35em"
                  y={this.state.y}
                  x={this.state.x}
                  className={this.state.className}
                  style={{fillOpacity: this.state.fillOpacity}}>
                {this.props.d}
            </text>
        );
    }
};

Based on Mike Bostock's General Update Pattern 4.0 block.

License

CC0 (public domain)

You can’t perform that action at this time.