react-d3 / react-d3-basic

Basic d3 charts in React.js, only include: line, bar, pie, scatter, area charts.
http://reactd3.org/docs/basic
221 stars 117 forks source link

Auto Scaling... #23

Closed jhawthor closed 8 years ago

jhawthor commented 8 years ago

Super job on this but how do I perform automatic scaling when the page is resized?

chilijung commented 8 years ago

@jhawthor, you'll have to set width, height in state, and set state every time the window changed.

Example:

var WindowDimensions = React.createClass({
    render: function() {
        return <span>{this.state.width} x {this.state.height}</span>;
    },
    updateDimensions: function() {
        this.setState({width: $(window).width(), height: $(window).height()});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        window.addEventListener("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        window.removeEventListener("resize", this.updateDimensions);
    }
});

http://stackoverflow.com/questions/19014250/reactjs-rerender-on-browser-resize