draw-line-using-separate-fixed-x-y-input-arrays

http://stackoverflow.com/questions/23305785/draw-line-with-d3-js-using-separate-fixed-x-y-input-arrays/23309969#23309969

by Nivaldo

JavaScript

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

var xdata = d3.range(20);
var ydata = [1, 4, 5, 9, 10, 14, 15, 15, 11, 10, 5, 5, 4, 8, 7, 5, 5, 5, 8, 10];

var xy = [];
for(var i=0;i<xdata.length;i++){
   xy.push({x:xdata[i],y:ydata[i]});
}

var xscl = d3.scale.linear()
    .domain(d3.extent(xy,function(d) {return d.x;}))
    .range([0 + margin.left, width])

var yscl = d3.scale.linear()
    .domain(d3.extent(xy,function(d) {return d.y;}))
    .range([height, margin.top])

var slice = d3.svg.line()
  .x(function(d,i) { return xscl(d.x);})
  .y(function(d,i) { return yscl(d.y);})

var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)

svg.append('rect') // outline for reference
	.attr({x: margin.left, y: margin.top,
	       width:(width + margin.left),
	       height: (height + margin.top),
	       stroke: 'black',
	       'stroke-width': 0.5,
	       fill:'white'});

svg.append("path")
    .attr("class", "line")
    .attr("d", slice(xy))
    .style("fill", "none")
    .style("stroke", "red")
    .style("stroke-width", 2);