score:0

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, ...

d3.csv("data.csv")
  .row(function(d) {
    return {
      key: d.name,
      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()
      .interpolate("basis")
      .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")
      .data(data)
      .enter().append("g")
      .attr("class", "linegroup"); 

    g.append("path")
      .attr("class", "line")
      .attr("d", function(d) {
        return line(d.values);
      })
      .style("stroke", function(d,i) {
        return color(i);
      })
      .attr("fill","none");

here's an example.


Related Query

More Query from same tag