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

是的，您不应该创建重复项。请注意，示例中的<TextBox DataContext="{StaticResource ContactInformation}" Text="{Binding Name, Mode=OneWay}"/> <TextBox DataContext="{StaticResource ContactInformation}" Text="{Binding Name.FullName, Mode=OneWay}"/>是接受valueline并生成行路径的函数（此函数在API中也称为行生成器）。您可以创建一个函数，该函数将为每个数据列返回不同的函数（行生成器）：

data

这里的工作示例：https://jsfiddle.net/sdnyn8uf/18/（对不起，第二段没有可支撑点）

动态地在折线图中绘制多条线

1 个答案: