svg-line

Generate SVG paths for a line, d3-style.

Usage

line = svgLine()

Creates a new line generator.

line(points)

Given an array of points, return an SVG path string that you can then use when setting a <path>'s d attribute.

By default, each point is assumed to be an object with an x and a y coordinate, e.g. to create a 1x1 square:

var line = require('svg-line')()
var svg = 'http://www.w3.org/2000/svg'
var d = line([
    { x: 0, y: 0 }
  , { x: 1, y: 0 }
  , { x: 1, y: 1 }
  , { x: 0, y: 1 }
])
 
var square = document.createElementNS(svg, 'path')
 
square.setAttribute('d', d)

line.x(getX)

Pass in a new function responsible for getting a point's x coordinate from a single element in the array.

The function is passed (d, i), where d is the element and i is its index in the array.

For example:

var svg  = 'http://www.w3.org/2000/svg'
var line = require('svg-line')()
  .x(function(d) { return d[0] })
  .y(function(d) { return d[1] })
 
var d = line([
    [0, 0]
  , [1, 0]
  , [1, 1]
  , [0, 1]
])
 
var square = document.createElementNS(svg, 'path')
 
square.setAttribute('d', d)

line.y(getY)

Much like line.x, pass in a new function responsible for getting a point's y corrdinate from a single element in the array.

License

MIT. See LICENSE.md for details.