Question

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

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

首先我要尝试单独创建它们

//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 part我可能会使用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);

使用d3.js从csv文件创建多行图表

1 个答案: