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