here's one possible solution. first, use a d3.csv .row to organize the data into an object of key: [values] where key is your x, y and z and values is an array of val1, val2, ...

  .row(function(d) {
    return {
      values: [+d.val1, +d.val2, +d.val3, +d.val4]
  .get(function(error, data) {
     // draw plot

then your line generator is simply:

    var line = d3.svg.line()
      .x(function(d,i) { return rangex(slots[i]); })
      .y(function(d,i) { return rangey(d); });

and you draw each line as:

    var g = p.selectall(".linegroup")
      .attr("class", "linegroup"); 

      .attr("class", "line")
      .attr("d", function(d) {
        return line(d.values);
      .style("stroke", function(d,i) {
        return color(i);

here's an example.

Related Query

More Query from same tag