function update() { d3.select('svg') .selectAll('line') .data(branches) .transition() .attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2); }
updateBarChart(newData) { const svgCanvas = select(this.refs.canvas); const bars = svgCanvas.selectAll('.bar').data(newData); bars .transition() .attr('height', (datapoint) => datapoint * scale) .attr('y', (datapoint) => canvasHeight - datapoint * scale); bars.exit().remove(); }
this.text.transition(t).tween("text", function() { const selection = d3.select(this); const start = selection.text(); const interpolator = d3.interpolateNumber(start, total); return function(t) { selection.text(Math.round(interpolator(t))); }; });
viewGraphRegion(minX, minY, maxX, maxY) { const [width, height] = this.getSvgViewDimensions(); const dx = maxX - minX; const dy = maxY - minY; const x = (minX + maxX) / 2; const y = (minY + maxY) / 2; const scale = Math.min(width / dx, height / dy) * 0.9; this.svg .transition().duration(120).call(this.panZoom.scaleTo, scale) .transition().duration(120).call(this.panZoom.translateTo, x, y); }
rect .transition() .duration(500) // .delay((d, i) => i * 10) .attr('x', function(d, i) { let layerIndex = this.parentNode.__data__.index return x(d.data.x) + x.bandwidth() / n * layerIndex }) .attr('width', x.bandwidth() / n) .transition() .attr('y', d => y(d[1] - d[0])) .attr('height', d => graphHeight - y(d[1] - d[0]))
componentDidUpdate() { const { height, y } = this.props; d3.select(this.rect.current) .transition() .duration(1000) .attr('height', height) .attr('y', y) .on('end', () => this.setState({ height, y })); }
rect.transition() .delay(function(d, i) { return i * 10; }) .attr("y", function(d) { return y(d.y0 + d.y); }) .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });
function update() { if (!(data.has(year))) return; title.text(year); birthyears.transition() .duration(750) .attr("transform", "translate(" + (x(year1) - x(year)) + ",0)"); birthyear.selectAll("rect") .data((birthyear) => (data.get(year).get(birthyear)) || [0, 0]) .transition() .duration(750) .attr("y", y) .attr("height", function(value) { return height - y(value); }); }
function transitionStacked() { y.domain([0, yStackMax]); var rect = d3.selectAll("rect"); rect.transition() .duration(500) .delay(function(d, i) { return i * 10; }) .attr("y", function(d) { return y(d.y0 + d.y); }) .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); }) .transition() .attr("x", function(d) { return x(d.x); }) .attr("width", x.rangeBand()); }
// This function will be triggered on load function transition() { d3.selectAll("path") .data(function() { var d = layers1; layers1 = layers0; return layers0 = d; }) .transition() .duration(2500) .attr("d", area); }
barsJoin.merge(newBars) // Update .transition() .duration(TRANSITION_SPEED) .attr('height', 0) .attr('y', this.y(0)) .transition() .attr('x', d => this.x(+d.year)) .attr('width', this.x.bandwidth()) .transition() .attr('y', d => this.y(+d.total)) .attr('height', d => this.innerHeight() - this.y(+d.total));
rect .transition() .delay((d, i) => (resize ? 0 : i * 10)) .attr('x', function(d, i) { let layerIndex = this.parentNode.__data__.index return x(d.data.x) + x.bandwidth() / n * layerIndex }) .attr('y', d => y(d[1] - d[0])) .attr('width', x.bandwidth() / n) .attr('height', d => graphHeight - y(d[1] - d[0]))
rect .transition() .delay((d, i) => (resize ? 0 : i * 10)) .attr('x', d => x(d.data.x)) .attr('y', d => y(d[1])) .attr('width', x.bandwidth()) .attr('height', d => y(d[0]) - y(d[1]))
function transitionGrouped() { y.domain([0, yGroupMax]); var rect = d3.selectAll("rect"); rect.transition() .duration(500) .delay(function(d, i) { return i * 10; }) .attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; }) .attr("width", x.rangeBand() / n) .transition() .attr("y", function(d) { return y(d.y); }) .attr("height", function(d) { return height - y(d.y); }); }
rect .transition() .duration(500) // .delay((d, i) => i * 10) .attr('y', d => y(d[1])) .attr('height', d => y(d[0]) - y(d[1])) .transition() .attr('x', d => x(d.data.x)) .attr('width', x.bandwidth())