d3 .line() .x(d => xScale(d.day)) .y(d => yScale(d.tweets))
render() { const {className, curve, data, x, y, ...props} = this.props; const line = d3.line() .curve(curve) .x(x) .y(y); return ( <path {...props} className={cx('line', className)} d={line(data)} fill="none" /> ); }
_createGuides() { if (!this.ticksY) { return null; } const lines = this.ticksY // don't draw guide line for 0s .filter(t => t) .map((tick) => { return d3.shape.line() .x((d) => this.scaleX(moment(d[0]).toDate())) .y((d) => -this.scaleY(d[1])) ([ [this.extentX[0], tick], [this.extentX[1], tick] ]) }) ; return lines; }
constructor(props) { super(props); this.margin = { top: 20, right: 20, bottom: 50, left: 0 }; this.renderingWidth = this.props.graphWidth - this.margin.left - this.margin.right; this.renderingheight = this.props.graphHeight - this.margin.top - this.margin.bottom; this.x = d3.scaleTime() .range([0, this.renderingWidth]); this.y = d3.scaleLinear() .rangeRound([this.renderingheight, 0]); this.line = d3.line() .x(d => this.x(d.date)) .y(d => this.y(d.price)); }
.line() .curve(curve) .x((d, i) => this.x(this.now - (limit - 1 - i) * duration)) .y(d => this.y(d)); this.state = { this.now = new Date(); let newData = [...this.state.data, randomNumber(min, max)]; this.x.domain([this.now - (limit - 2) * duration, this.now - duration]); this.setState({ data: newData }, () => { Animated.timing(this.translateXAnimValue, { toValue: this.x(this.now - (limit - 1) * duration), duration: animationDuration }).start(() => {
.x(d => scaleX(xAccessor(d))) .y(d => scaleY(yAccessor(d)));
const x = this.x; const y = this.y; const t = d3_transition().duration(500); const line = d3_line() .curve(d3_curveBasis) .x((d, i) => x(i)) .y(d => y(d)); .attr('fill', 'steelblue') .transition(t) .attr('x', (d, i) => x(i)) .attr('width', x.bandwidth() - 1); .attr('x', (d, i) => x(i)) .attr('y', d => y(d)) .attr('width', x.bandwidth() - 1)
.line() .curve(curve) .x(d => x(d.index)) .y(d => y(d.value)); this.linePath = createLineProps(lineGenerator(data)); this.points = data.map(d => ({ r: new Animated.Value(0), cx: x(d.index), cy: y(d.value), stroke: 'gray', this.points2 = data2.map(d => ({ r: new Animated.Value(0), cx: x(d.index), cy: y(d.value), stroke: 'gray',
d3.line() .x(x) .y(d => linear(weierstrass(d)))
d3.line() .x(d => xScale(d[0])) .y(d => yScale(d[1]))
d3 .line() .x(d => xScale(d.day)) .y(d => yScale(d.retweets))
d3 .line() .x(d => xScale(d.day)) .y(d => yScale(d.favorites))
.line() .curve(curve) .x((d, i) => this.x(this.now - (limit - 1 - i) * duration)) .y(d => this.y(d)); this.state = { this.now = new Date(); let newData = [...this.state.data, randomNumber(min, max)]; this.x.domain([this.now - (limit - 2) * duration, this.now - duration]); this.setState({ data: newData }, () => { Animated.timing(this.translateXAnimValue, { toValue: this.x(this.now - (limit - 1) * duration), duration: animationDuration }).start(() => {
.line() .curve(curve) .x(d => x(d.index)) .y(d => y(d.value)); this.linePath = createLineProps(lineGenerator(data)); this.points = data.map(d => ({ r: new Animated.Value(0), cx: x(d.index), cy: y(d.value), stroke: 'gray', this.points2 = data2.map(d => ({ r: new Animated.Value(0), cx: x(d.index), cy: y(d.value), stroke: 'gray',