| var d3 = window.d3 | |
| /* const data = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90] */ | |
| var data = d3.range(9).map(function (n) { return n * 10; }) | |
| var sqrtScale = d3.scaleSqrt() | |
| .domain([0, 100]) | |
| .range([0, 70]) | |
| var svg = d3.select('svg') | |
| // const width = +svg.attr('width') | |
| var height = +svg.attr('height') | |
| // using this instead of a x-scale | |
| // accumulate distance for each varying circle | |
| var xAccumulate = 0 | |
| svg.select('#vis') | |
| .selectAll('circle') | |
| .data(data) | |
| .enter() | |
| .append('circle') | |
| .attr('r', function (d) { return sqrtScale(d); }) | |
| .attr('cx', function (d, i) { | |
| if (i > 0) { xAccumulate += (sqrtScale(d) * 2) } | |
| return xAccumulate + (sqrtScale(d) * 2) | |
| }) | |
| .attr('cy', function (d) { return height / 2; }) | |
| // https://github.com/d3/d3-transition#active | |
| d3.selectAll('circle').transition() | |
| .delay(function (d, i) { return i * 50 }) | |
| .on('start', function repeat () { | |
| d3.active(this) | |
| .style('fill', 'red') | |
| .transition() | |
| .style('fill', 'green') | |
| .transition() | |
| .style('fill', 'blue') | |
| .transition() | |
| .on('start', repeat) | |
| }) | |
testing out chained transitions using d3.active via d3 docs
d3.selectAll("circle").transition()
.delay(function(d, i) { return i * 50; })
.on("start", function repeat() {
d3.active(this)
.style("fill", "red")
.transition()
.style("fill", "green")
.transition()
.style("fill", "blue")
.transition()
.on("start", repeat);
});
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { background: #130C0E;} | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="400"> | |
| <g id="vis" transform="translate(10, 10)"></g> | |
| </svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <!-- d3 code --> | |
| <script src=".script-compiled.js" charset="utf-8"></script> | |
| </body> | |
| </html> | |
| const d3 = window.d3 | |
| /* const data = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90] */ | |
| const data = d3.range(9).map(n => n * 10) | |
| const sqrtScale = d3.scaleSqrt() | |
| .domain([0, 100]) | |
| .range([0, 70]) | |
| const svg = d3.select('svg') | |
| // const width = +svg.attr('width') | |
| const height = +svg.attr('height') | |
| // using this instead of a x-scale | |
| // accumulate distance for each varying circle | |
| let xAccumulate = 0 | |
| svg.select('#vis') | |
| .selectAll('circle') | |
| .data(data) | |
| .enter() | |
| .append('circle') | |
| .attr('r', d => sqrtScale(d)) | |
| .attr('cx', (d, i) => { | |
| if (i > 0) xAccumulate += (sqrtScale(d) * 2) | |
| return xAccumulate + (sqrtScale(d) * 2) | |
| }) | |
| .attr('cy', d => height / 2) | |
| // https://github.com/d3/d3-transition#active | |
| d3.selectAll('circle').transition() | |
| .delay(function (d, i) { return i * 50 }) | |
| .on('start', function repeat () { | |
| d3.active(this) | |
| .style('fill', 'red') | |
| .transition() | |
| .style('fill', 'green') | |
| .transition() | |
| .style('fill', 'blue') | |
| .transition() | |
| .on('start', repeat) | |
| }) |
