React.js和D3.js实现的动态流域图

streaming area graph

React, d3

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2138
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var _class, _temp, _class2, _temp2, _class3, _temp3, _class5, _temp5, _class6, _temp6;

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

var addData = undefined;
var transitionDuration = 250;

setTimeout(function() {
    var view = [480, 320];
    var trbl = [0, 0, 0, 0]; // refactor, i don't understand the semantics of this.  Will i ever need trbl[1] or trbl[2] ?
    ReactDOM.render(React.createElement(Container, {
        view: view,
        trbl: trbl
    }), document.getElementById('js-app'));
}, 0);

function streamDataStep(stepIndex) {
    var factor = stepIndex % 100 / 50;
    var value = 50 * Math.sin(Math.PI * 2 * factor) + 50;
    addData(value);
    setTimeout(function() {
        streamDataStep(stepIndex + 1);
    }, transitionDuration);
}

function labelFn(value, index) {
    return value;
}

var Container = (_temp = _class = function(_React$Component) {
    _inherits(Container, _React$Component);

function Container(props) {
        _classCallCheck(this, Container);

var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

_this.state = {
            domainXMin: 100,
            domainXMax: 500,
            domainYMin: 0,
            domainYMax: 100,
            data: generateData(20)
        };
        return _this;
    }

Container.prototype.componentDidMount = function componentDidMount() {
        var _this2 = this;

addData = function addData(value) {
            var data = _this2.state.data.slice(0);
            data.shift();
            var index = data[data.length - 1].index + 1;
            data.push({
                index: index,
                value: value
            });
            _this2.setState({
                data: data
            });
        };
        streamDataStep(20);
    };

Container.prototype.buildDataSeries = function buildDataSeries(data, containerView, containerTrbl, horizontalAxisHeight, verticalAxisWidth, xScale, yScale) {
        var trbl = [horizontalAxisHeight, verticalAxisWidth, horizontalAxisHeight, verticalAxisWidth];
        var view = [containerView[0] - verticalAxisWidth * 2, containerView[1] - horizontalAxisHeight * 2];
        return React.createElement(AreaDataSeries, {
            data: data,
            trbl: trbl,
            view: view,
            xScale: xScale,
            yScale: yScale
        });
    };

Container.prototype.buildVerticalAxis = function buildVerticalAxis(containerView, containerTrbl, horizontalAxisHeight, verticalAxisWidth, scale) {
        var view = [verticalAxisWidth, containerView[1] - horizontalAxisHeight * 2];
        var trbl = [horizontalAxisHeight, 0, 0, 0];
        var orientation = VerticalAxis.orientation.LEFT;
        var tickValues = scale.ticks();
        return React.createElement(AnimatedVerticalAxis, {
            scale: scale,
            trbl: trbl,
            view: view,
            tickValues: tickValues,
            orientation: orientation,
            labelFn: labelFn
        });
    };

Container.prototype.buildScale = function buildScale(domainMin, domainMax, range) {
        return d3.scaleLinear().domain([domainMin, domainMax]).range(range);
    };

Container.prototype.buildHorizontalAxis = function buildHorizontalAxis(containerView, containerTrbl, horizontalAxisHeight, verticalAxisWidth, scale) {
        var view = [containerView[0] - verticalAxisWidth * 2, horizontalAxisHeight];
        var trbl = [containerView[1] - horizontalAxisHeight, verticalAxisWidth, 0, verticalAxisWidth];
        var orientation = HorizontalAxis.orientation.BOTTOM;
        var tickValues = scale.ticks();
        return React.createElement(AnimatedHorizontalAxis, {
            scale: scale,
            trbl: trbl,
            view: view,
            tickValues: tickValues,
            orientation: orientation,
            labelFn: labelFn
        });
    };

Container.prototype.render = function render() {
        var _props = this.props;
        var view = _props.view;
        var trbl = _props.trbl;
        var data = this.state.data;

return Container;
}(React.Component), _class.propTypes = {
    trbl: React.PropTypes.array.isRequired,
    view: React.PropTypes.array.isRequired
}, _temp);
var HorizontalAxis = (_temp2 = _class2 = function(_React$Component2) {
    _inherits(HorizontalAxis, _React$Component2);

function HorizontalAxis() {
        _classCallCheck(this, HorizontalAxis);

return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
    }

HorizontalAxis.prototype.buildTicks = function buildTicks(tickValues, scale, labelFn, trbl, view, orientation) {
        return tickValues.map(function(tickValue, index) {
            var xPos = scale(tickValue);
            var y2 = view[1];
            var y1 = y2 - 5;
            if (orientation === HorizontalAxis.orientation.BOTTOM) {
                y1 = 0;
                y2 = 5;
            }
            return React.createElement(
                'g', {
                    key: index,
                    transform: 'translate(' + xPos + ', 0)'
                },
                React.createElement('line', _extends({
                    y1: y1,
                    y2: y2
                }, {
                    stroke: 'darkgray',
                    x1: 0,
                    x2: 0
                })),
                React.createElement(
                    'text', {
                        dy: '1.4em',
                        textAnchor: 'middle',
                        x: 0,
                        y: 0
                    },
                    labelFn(tickValue, index)
                )
            );
        });
    };

HorizontalAxis.prototype.render = function render() {
        var _props2 = this.props;
        var scale = _props2.scale;
        var view = _props2.view;
        var trbl = _props2.trbl;
        var labelFn = _props2.labelFn;
        var tickValues = _props2.tickValues;
        var orientation = _props2.orientation;

return React.createElement(
            'g', {
                transform: 'translate(' + trbl[3] + ', ' + trbl[0] + ')'
            },
            this.buildTicks(tickValues, scale, labelFn, trbl, view, orientation)
        );
    };

return HorizontalAxis;
}(React.Component), _class2.propTypes = {
    labelFn: React.PropTypes.func.isRequired,
    orientation: React.PropTypes.string.isRequired,
    scale: React.PropTypes.func.isRequired,
    tickValues: React.PropTypes.array.isRequired,
    trbl: React.PropTypes.array.isRequired,
    view: React.PropTypes.array.isRequired
}, _class2.orientation = {
    BOTTOM: 'horizontal-axis-bottom',
    TOP: 'horizontal-axis-top'
}, _temp2);
var VerticalAxis = (_temp3 = _class3 = function(_React$Component3) {
    _inherits(VerticalAxis, _React$Component3);

function VerticalAxis() {
        _classCallCheck(this, VerticalAxis);

return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
    }

VerticalAxis.prototype.buildTicks = function buildTicks(tickValues, scale, labelFn, trbl, view, orientation) {
        return tickValues.map(function(tickValue, index) {
            var yPos = scale(tickValue);
            var x2 = view[0];
            var x1 = x2 - 5;
            var anchorPosition = 'end';
            var textXPos = x1 - 2;
            if (orientation === VerticalAxis.orientation.RIGHT) {
                x1 = 0;
                x2 = 5;
                anchorPosition = 'start';
                textXPos = x2 + 2;
            }
            return React.createElement(
                'g', {
                    key: index,
                    transform: 'translate(0, ' + yPos + ')'
                },
                React.createElement('line', _extends({
                    x1: x1,
                    x2: x2
                }, {
                    stroke: 'darkgray',
                    y1: 0,
                    y2: 0
                })),
                React.createElement(
                    'text', {
                        dy: 3,
                        textAnchor: anchorPosition,
                        x: textXPos,
                        y: 0
                    },
                    labelFn(tickValue, index)
                )
            );
        });
    };

VerticalAxis.prototype.render = function render() {
        var _props3 = this.props;
        var scale = _props3.scale;
        var view = _props3.view;
        var trbl = _props3.trbl;
        var labelFn = _props3.labelFn;
        var tickValues = _props3.tickValues;
        var orientation = _props3.orientation;

return VerticalAxis;
}(React.Component), _class3.propTypes = {
    labelFn: React.PropTypes.func.isRequired,
    orientation: React.PropTypes.string.isRequired,
    scale: React.PropTypes.func.isRequired,
    tickValues: React.PropTypes.array.isRequired,
    trbl: React.PropTypes.array.isRequired,
    view: React.PropTypes.array.isRequired
}, _class3.orientation = {
    LEFT: 'horizontal-axis-left',
    RIGHT: 'horizontal-axis-right'
}, _temp3);

var AnimatedAxisWrapper = function AnimatedAxisWrapper() {
    return function(ComposedComponent) {
        var _class4, _temp4;

return _temp4 = _class4 = function(_React$Component4) {
            _inherits(_class4, _React$Component4);

function _class4(props) {
                _classCallCheck(this, _class4);

var _this5 = _possibleConstructorReturn(this, _React$Component4.call(this, props));

var scale = _this5.props.scale;

var _scale$domain = scale.domain();

var domainMin = _scale$domain[0];
                var domainMax = _scale$domain[1];

_this5.state = {
                    domainMax: domainMax,
                    domainMin: domainMin
                };
                return _this5;
            }

_class4.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
                var _this6 = this;

var _nextProps$scale$doma = nextProps.scale.domain();

var nextDomainMin = _nextProps$scale$doma[0];
                var nextDomainMax = _nextProps$scale$doma[1];

var _props$scale$domain = this.props.scale.domain();

var domainMin = _props$scale$domain[0];
                var domainMax = _props$scale$domain[1];

if (nextDomainMin === domainMin && nextDomainMax === domainMax) {
                    return;
                }
                d3.select(this).transition().tween('attr.domain'); // refactor, is this necessary to cancel previous transition?
                d3.select(this).transition().duration(transitionDuration).ease(d3.easeLinear).tween('attr.domain', function() {
                    var minInterpolator = d3.interpolateString(domainMin, nextDomainMin);
                    var maxInterpolator = d3.interpolateString(domainMax, nextDomainMax);
                    return function(t) {
                        _this6.setState({
                            domainMin: minInterpolator(t),
                            domainMax: maxInterpolator(t)
                        });
                    };
                });
            };

_class4.prototype.render = function render() {
                var props = this.props;
                var scale = props.scale;
                var _state = this.state;
                var domainMin = _state.domainMin;
                var domainMax = _state.domainMax;

var newScale = scale.copy();
                newScale.domain([domainMin, domainMax]);
                var newProps = Object.assign({}, props, {
                    scale: newScale
                });
                return React.createElement(ComposedComponent, newProps);
            };

return _class4;
        }(React.Component), _class4.propTypes = {
            scale: React.PropTypes.func.isRequired
        }, _temp4;
    };
};

var AnimatedVerticalAxis = AnimatedAxisWrapper()(VerticalAxis);
var AnimatedHorizontalAxis = AnimatedAxisWrapper()(HorizontalAxis);

var AreaDataSeries = (_temp5 = _class5 = function(_React$Component5) {
    _inherits(AreaDataSeries, _React$Component5);

function AreaDataSeries() {
        _classCallCheck(this, AreaDataSeries);

return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments));
    }

AreaDataSeries.prototype.buildAreaPlot = function buildAreaPlot(data, view, trbl, xScale, yScale, fill) {
        var area = d3.area();
        area.x(function(_ref5) {
            var index = _ref5.index;
            return xScale(index);
        });
        area.y0(view[1]);
        area.y1(function(_ref6) {
            var value = _ref6.value;
            return yScale(value);
        });
        area.curve(d3.curveLinear);
        var d = area(data);
        return React.createElement(AnimatedPath, {
            d: d,
            fill: fill
        });
    };

AreaDataSeries.prototype.render = function render() {
        var _props4 = this.props;
        var trbl = _props4.trbl;
        var view = _props4.view;
        var data = _props4.data;
        var xScale = _props4.xScale;
        var yScale = _props4.yScale;
        var year = _props4.year;

var fill = 'steelblue';
        return React.createElement(
            'g', {
                transform: 'translate(' + trbl[3] + ', ' + trbl[0] + ')'
            },
            this.buildAreaPlot(data, view, trbl, xScale, yScale, fill)
        );
    };

return AreaDataSeries;
}(React.Component), _class5.propTypes = {
    data: React.PropTypes.array.isRequired,
    trbl: React.PropTypes.array.isRequired,
    view: React.PropTypes.array.isRequired,
    xScale: React.PropTypes.func.isRequired,
    yScale: React.PropTypes.func.isRequired
}, _temp5);
var AnimatedPath = (_temp6 = _class6 = function(_React$Component6) {
    _inherits(AnimatedPath, _React$Component6);

function AnimatedPath(props) {
        _classCallCheck(this, AnimatedPath);

var _this8 = _possibleConstructorReturn(this, _React$Component6.call(this, props));

_this8.state = {
            d: props.d || ''
        };
        return _this8;
    }

AnimatedPath.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
        var _this9 = this;

if (nextProps.d === this.props.d) {
            return;
        }
        d3.select(this).transition().tween('attr.d'); // refactor, is this necessary to cancel previous transition?
        d3.select(this).transition().duration(transitionDuration).ease(d3.easeLinear).tween('attr.d', function() {
            var interpolator = d3.interpolateString(_this9.state.d, nextProps.d);
            return function(t) {
                _this9.setState({
                    d: interpolator(t)
                });
            };
        });
    };

AnimatedPath.prototype.render = function render() {
        var fill = this.props.fill;
        var d = this.state.d;

return React.createElement('path', {
            d: d,
            fill: fill
        });
    };

return AnimatedPath;
}(React.Component), _class6.propTypes = {
    d: React.PropTypes.string.isRequired,
    fill: React.PropTypes.string.isRequired
}, _temp6);

var BaseWrapper = function BaseWrapper() {
    return function(ComposedComponent) {
        var _class7, _temp7;

return _temp7 = _class7 = function(_React$Component7) {
            _inherits(_class7, _React$Component7);

function _class7() {
                _classCallCheck(this, _class7);

return _possibleConstructorReturn(this, _React$Component7.apply(this, arguments));
            }

_class7.prototype.render = function render() {
                var props = this.props;
                var view = props.view;
                var trbl = props.trbl;
                var children = props.children;

return _class7;
        }(React.Component), _class7.propTypes = {
            trbl: React.PropTypes.array.isRequired,
            view: React.PropTypes.array.isRequired
        }, _temp7;
    };
};

Container = BaseWrapper()(Container);

编译

CSS

HTML

streaming area graph

React, d3

编辑器支持Emmet

快捷键

streaming area graph

React, d3

使用React.js实现的几何图形运动动画

使用ReactJS和Mo.js实现的甩热狗动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：