stroke dash

_.md

[ Launch: stroke dash ] 6501816 by enjalot

config.json

{"description":"stroke dash","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"inline-console":true,"thumbnail":"http://i.imgur.com/CEq6f6j.png"}

inlet.js

var data = [
  {x: 0, y:50},
  {x: 25, y:0},
  {x: 50, y:50}
  ]
  
var line = d3.svg.line()
  .x(function(d) {
  	return d.x;
  })
  .y(function(d) {
    return d.y;
  });
  
var svg = d3.select("svg");
  
var group = svg.append("g")
  .attr({
  transform: "translate(" + [60, 150] + ")"
  })
  
var path = group.append("path")
  .attr({
  d: line(data),
  fill: "none",
  stroke: "#000"
  })
    
var len = path.node().getTotalLength();
console.log(len);
len = 44
var offset = 26;

p = path.attr({
  "stroke-dasharray": 64 + " " + 26,
  "stroke-dashoffset": offset
})

    
    
//more info on this
//http://bl.ocks.org/1313857
//http://www.carto.net/svg/samples/animated_bustrack.shtml