Using d3.js to create multi-line chart from csv file

Question

I'm try to create a multi-line chart with my csv file. The content of csv file look like this:

date,A,B 100,1,0 101,2,0 102,3,0 103,4,0 104,5,0 105,6,1 106,7,2 107,8,3 108,9,4 109,10,5 110,11,6

And first I'm trying to create them separately

//This is for the line A    
    var lineGen = d3.svg.line()  
                    .x(function(d) {
                      return xScale(d.date);
                    })
                    .y(function(d) {
                      return yScale(d.A);
                    })
                    .interpolate("basis");
//This is for the line B
    var lineGen2 = d3.svg.line()
                     .x(function(d) {
                       return xScale(d.date);
                     })
                     .y(function(d) {
                       return yScale(d.B);
                     })
                     .interpolate("basis");

var data = d3.csv("new_test2.csv", function(data) {
             vis.append('svg:path') 
               .attr('d', lineGen(data))  //This is for the line A
               .attr('stroke', 'green')
               .attr('stroke-width', 2)
               .attr('fill', 'none');

             vis.append('svg:path')
                .attr('d', lineGen2(data))  //This is for the line B
                .attr('stroke', 'blue')
                .attr('stroke-width', 2)
                .attr('fill', 'none');
             });

It work well! But obviously most of the codes is too redundant cause they're just doing the same thing with different column. I wonder whether there is a way to access each column one by one and plot a different line of it?

For now I'm trying to use the JavaScript function to handle the argument:

function draw_line(c, data){
                    console.log(c);  
                    var lineGen = d3.svg.line()
                        .x(function(d) {
                            return xScale(d.date);
                        })
                        .y(function(d) {
                            console.log(d[c]);
                            return yScale(d[c]);
                        })
                        .interpolate("basis");
                    lineGen(data); 
                };
var data = d3.csv("new_test2.csv", function(data) {
                    vis.append('svg:path')
                    .attr('d', draw_line('A', data))
                    .attr('stroke', 'green')
                    .attr('stroke-width', 2)
                    .attr('fill', 'none');

                    vis.append('svg:path')
                    .attr('d', draw_line('B', data))
                    .attr('stroke', 'blue')
                    .attr('stroke-width', 2)
                    .attr('fill', 'none');
                });

But it won't print out any line, but when checking the returned value with console.log, everything seems totally fine. what's going wrong here? Please help :'(

Thanks for every answer provided!

(For the vis.append part I probably are going to use for-loop to go through all the column, but I'm not sure how to handle the color -- to make each line show in different color-- so I haven't work on this part yet)

Answer 1

function draw_line(c, data){
                    console.log(c);  
                    var lineGen = d3.svg.line()
                        .x(function(d) {
                            return xScale(d.date);
                        })
                        .y(function(d) {
                            console.log(d[c]);
                            return yScale(d[c]);
                        })
                        .interpolate("basis");
                    lineGen(data); // this line should be return
                }; 

change it to

return lineGen(data);