Skip to content

Instantly share code, notes, and snippets.

@jugalpatel803

jugalpatel803/animate svg line in d3

Created August 17, 2016 22:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jugalpatel803/6034cc0b1b13d284b078d95316fb86f9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jugalpatel803/6034cc0b1b13d284b078d95316fb86f9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
animate svg line in d3
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
svg.on("click", function(){
path
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", totalLength);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment