shapes: lines

by Laurie Skelly

HTML

<svg height="800px"></svg>

CSS

line {
    stroke:gray;
    stroke-width:3px;
}

path {
  stroke:purple;
  stroke-width:3px;
  fill:none; 
}

JavaScript

svg=d3.select('svg')

svg.append('line')
.attr('x1',10)
.attr('y1',10)
.attr('x2',150)
.attr('y2',100)

var data = [{x:10,y:125},{x:50,y:250},{x:150,y:175}]

var line = d3.svg.line()
.x(function(d){return d.x;})
.y(function(d){return d.y;})
.interpolate('basis');

svg.append('g')
.append('path')
.attr('d',line(data))