javascript - 动态在折线图中绘制多条线

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() 函数来创建第二行，然后创建另一个 svg.append("path") 行 valueline2() 创建路径。因此，行数越多，重复的代码就越多，所以我认为这不是更好的方法。请帮忙，真的很困扰。

Answer 1

是的，您不应该创建重复项。请注意，示例中的 valueline 是接受数据 并生成行路径的函数(此函数在 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/ (抱歉，第二段没有可悬停点)