动态绘制多条折线图

Question

我试图根据this example创建一个多折线图，并且需要根据用户选择动态绘制多条线。该代码使用下面的方法来创建行：

var valueline = d3.svg.line() 
    .x(function(d) { 
    return x(d.date); 
    }) 
    .y(function(d) { 
    return y(d.primary); 
    }); 

然后创建调用valueline()创建路径：

svg.append("path") 
    .attr("class", "line") 
    .attr("d", valueline(data)); 

我使用JSON来呈现图表和有对象的简单数组与关键字 - 值对：

data = [{ 
     "date": "1-Apr-11", 
     "primary": 58.13, 
     "secondary": 28.13 
    }, { 
     "date": "1-May-11", 
     "primary": 53.98, 
     "secondary": 35.13 
    }]; 

Here is the JSFiddle.

当前代码只能绘制primary一行。任何人都可以请建议一个动态的方式来绘制多行？我尝试创建第二个valueline2()函数来创建第二行，然后使用valueline2()行创建另一个svg.append("path")以创建路径。所以线条越多，代码就会越多，所以我认为这不是一个更好的方法。请帮助，真的卡住了。

Answer 1

是的，你不应该创建重复。请注意，您示例中的valueline是接受data并生成行路径（该函数在API中也称为行生成器）的函数。你可以创建一个按每个数据列返回不同的功能（线发生器）功能：

// Define the parametric line generator 
    var valueline = function(field) { 
     return d3.svg.line() 
     .x(function(d) { 
     return x(d.date); 
     }) 
     .y(function(d) { 
     return y(d[field]); 
     }); 
    }; 
    ... 

     for (let field of ["primary", "secondary"]) 
     { 
     // Add the valueline path. 
     svg.append("path") 
      .attr("class", "line") 
      // here you constructing specific line generator and pass data to it 
      .attr("d", valueline(field)(data)); 
     } 

工作示例这里：https://jsfiddle.net/sdnyn8uf/18/（抱歉，对于第二段没有hoverable点那里）