Instantly share code, notes, and snippets.

What would you like to do?
Animate path in D3
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
width: 700px;
margin: 20px 0;
height: 300px;
background: #eee;
button {
margin: 20px 0 0 20px;
<div id="line"></div>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
var w = 700;
var h = 300;
var svg ="#line")
.attr("width", w)
.attr("height", h)
.attr("id", "visualization")
.attr("xmlns", "");
var data = d3.range(11).map(function(){return Math.random()*10})
var x = d3.scale.linear().domain([0, 10]).range([0, 700]);
var y = d3.scale.linear().domain([0, 10]).range([10, 290]);
var line = d3.svg.line()
.x(function(d,i) {return x(i);})
.y(function(d) {return y(d);})
var path = svg.append("path")
.attr("d", line(data))
.attr("stroke", "steelblue")
.attr("stroke-width", "2")
.attr("fill", "none");
var totalLength = path.node().getTotalLength();
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.attr("stroke-dashoffset", 0);
svg.on("click", function(){
.attr("stroke-dashoffset", totalLength);

This comment has been minimized.

aarthi0808 commented Dec 12, 2013

Looking great. Thanks! I searched for this (animated path). But have you check,its not working properly in Firefox.Animation starts with full path and erases it and draw it again ..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment