Skip to content

Instantly share code, notes, and snippets.

@miketahani
Forked from mbostock/.block
Last active July 6, 2016 00:47
Show Gist options
  • Save miketahani/a4dc8be59f387501c22017401975a0ae to your computer and use it in GitHub Desktop.
Save miketahani/a4dc8be59f387501c22017401975a0ae to your computer and use it in GitHub Desktop.
Stroke Dash Interpolation
license: gpl-3.0

(Janky modification to preserve stroke-dasharray styling)

By interpolating the stroke-dasharray style property, you can animate a stroke from start to end. This might be used to convey directionality of connected links in a network graphic, such as our graphic of Academy Award nominees. By setting the transition duration proportional to the length of the line and using linear easing, you can further animate the stroke at constant speed.

A related technique is point-along-path interpolation.

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
path {
fill: none;
stroke: #000;
stroke-width: 3px;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var points = [
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
var line = d3.svg.line()
.tension(0) // Catmull–Rom
.interpolate("cardinal-closed");
var svg = d3.select("body").append("svg")
.datum(points)
.attr("width", 960)
.attr("height", 500);
svg.append("path")
.style("stroke", "#ddd")
.style("stroke-dasharray", "4,4")
.attr("d", line);
svg.append("path")
.attr("d", line)
.call(transition);
function transition(path) {
path.transition()
.duration(7500)
.ease('linear')
.attrTween("stroke-dasharray", tweenDash)
.each("end", function() { d3.select(this).call(transition); });
}
function tweenDash() {
var l = this.getTotalLength(),
arraySegment = '4,4 ',
// segmentSize is the total size of a dasharray "segment" (sum of dashes & gaps).
// arraySegment is dash 4 + gap 4 = 8
segmentSize = 8;
return function(t) {
let seg = ~~(t * l / segmentSize);
return `${arraySegment.repeat(seg)} 0,${l}`;
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment