javascript - 使用 d3.js 从 csv 文件创建多线图表

Question

我尝试使用 csv 文件创建多线图表。 csv 文件的内容如下所示:

日期，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

首先我尝试单独创建它们

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

效果很好! 但显然大多数代码太冗余，因为它们只是对不同的列执行相同的操作。 我想知道是否有一种方法可以逐一访问每一列并绘制它的不同线？

现在我尝试使用 JavaScript 函数来处理参数:

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

但它不会打印出任何行，但是当使用 console.log 检查返回值时，一切似乎都很好。 这里出了什么问题？请帮忙:'(

感谢您提供的每一个答案!

(对于 vis.append 部分，我可能会使用 for 循环来遍历所有列，但我不确定如何处理颜色 -让每条线显示不同的颜色——所以我还没有处理这部分)

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

更改为

return lineGen(data);