Verwenden von d3.js zum Erstellen von Multi-Liniendiagramm aus csv-Datei

Question

Ich versuche, ein mehrzeiliges Diagramm mit meiner CSV-Datei zu erstellen. Der Inhalt CSV-Datei wie folgt aussehen:

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

Und sie zuerst Ich versuche, separat zu erstellen

//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'); 
      }); 

Es gut funktionieren! Aber offensichtlich sind die meisten Codes zu redundant weil sie nur das Gleiche mit anderen Spalte tun. Ich frage mich, ob es eine Möglichkeit gibt, auf jede Spalte einzeln zuzugreifen und eine andere Zeile zu zeichnen?

Vorerst Ich versuche, die JavaScript-Funktion zu verwenden, um das Argument zu behandeln:

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'); 
       }); 

Aber es wird jede Zeile nicht gedruckt, aber wenn der Rückgabewert mit console.log Kontrolle, alles scheint völlig in Ordnung . was läuft hier falsch? Bitte helfen: '(

Dank für jede Antwort zur Verfügung gestellt

(Für die vis.append part ich wahrscheinlich for-Schleife verwenden werden, um die ganzen Spalte zu gehen, aber ich bin nicht sicher, wie das zu handhaben Farbe - jede Zeile zeigt in verschiedenen Farbe-- zu machen, damit ich nicht auf diesem Teil arbeiten habe noch)

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 
       }; 

Änderung es

return lineGen(data);