Simple Lines in D3

HTML

<svg width="400" height="400"></svg>

CSS

svg {
    background: lightblue;
}

JavaScript

//three ways to draw a simple line in d3


// (1), using svg mini language to define the points

d3.select('svg')
  .append('path')
  .attr({
    d: 'M0,0L200,200',
    stroke: '#000'
  });

// (2), create a line generator function

var simpleLine = d3.svg.line();

d3.select('svg')
  .append('path')
  .attr({
    d: simpleLine([[0,0],[200,200]]),
    stroke: '#000'
  });

// (3), directly set attribute value for points

d3.select('svg')
  .append('line')
  .attr({
    x1: 0,
    y1: 0,
    x2: 200,
    y2: 200,
    stroke: '#000'
  });

// note: all three examples draw a line from 0,0 to 200,200