動態地在折線圖中繪制多條線

Question

我試圖在這個例子中創建一個多線圖，並需要根據用戶選擇動態繪制多行。 該代碼使用以下方法創建行：

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

這是JSFiddle。

當前的代碼是唯一能夠繪制的primary線路。 任何人都可以建議一種動態的方式來繪制多條線？ 我嘗試創建第二個valueline2()函數來創建第二行，然后創建另一個svg.append("path")使用行valueline2()來創建路徑。 所以線越多，重復的代碼就越多，所以我認為這不是一個更好的方法。 請幫忙，真的堅持這個。

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/（對不起，第二段沒有可支撐點）