Built with blockbuilder.org
Last active
December 10, 2018 01:01
-
-
Save max-l/6f773931e2e632a51d72de3463a45ebf to your computer and use it in GitHub Desktop.
point along path
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <style> | |
| path {fill: none;stroke: #000;stroke-width: 3px;} | |
| circle {fill: steelblue;stroke: #fff;stroke-width: 3px;} | |
| </style> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| const points = [[71, 64],[124, 126],[130, 253]]; | |
| const pathStart = () => points[0] | |
| const svg = d3.select("body").append("svg") | |
| .attr("width", 760) | |
| .attr("height", 500); | |
| //d3v4 line generator that uses a cardinal-closed curve | |
| const path = svg.append("path") | |
| .data([points]) | |
| .attr("d", d3.line().curve(d3.curveCardinal)); | |
| // Notice how the transition is slow for the first | |
| // quarter of the aniimation | |
| // is fast for the second and third quarters and is slow | |
| // again in the final quarter | |
| // This is normal behavior for d3.transition() | |
| const translateAlong = path => { | |
| const l = path.getTotalLength() ; | |
| return (d, i, a) => t => { | |
| const p = path.getPointAtLength(t * l) | |
| return `translate(${p.x},${p.y})`; | |
| }; | |
| } | |
| //const circle = svg.append("circle") | |
| // .attr("r", 20) | |
| // .attr("transform", `translate(${points[0]})`); | |
| //svg.selectAll(".point") | |
| // .data(points).enter().append("circle") | |
| // .attr("r", 4) | |
| // .attr("transform", d => `translate(${d})`); | |
| const data = d3.range(10) | |
| .map(i => ({id:i,x:0,y:0})) | |
| const sel = svg.selectAll("circle") | |
| .data(data); | |
| const rnd = d3.randomUniform(500, 1500) | |
| sel.enter() | |
| .append("circle") | |
| .attr("r", 10) | |
| .transition() | |
| .ease(d3.easeQuad) | |
| .delay(rnd) | |
| .duration(2000) | |
| .attrTween("transform", translateAlong(path.node())) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment