javascript - 如何创建一个 d3 线函数来为 x、y1、y2 数据绘制 2 条线？

Question

我有一个这种格式的数据数组:

var data = [{x:0,y1:1, y2:2}, {x:1, y1:2, y2:2},...]

我想使用 d3 借助 line 函数来绘制此图。

所以，我在 svg 容器上创建了 2 个路径...

var path1 = svg.append("path");
var path2 = svg.append("path");

现在，为了绘制第一条线，我使用了:

var lineFunction = d3.svg.line()
                  .x(function(d){return d.x}
                  .y(function(d){return d.y1}
                  .interpolate("linear")

和

path1.attr("d", lineFunction(data))

效果很好。但是，现在我该如何绘制第二条线呢？我当然可以创建一个新的 lineFunction，它返回 d.y2 作为 y 值，但这完全违背了 DRY 原则。我认为我的工作流程不太正确，所以我可以问你实际上应该如何做吗？换句话说，我应该如何创建一个可以同时处理 y1 和 y2 数据的线函数？

Answer 1

为了扩展@Lars 的推荐，这里的技巧是首先将数据转变成一个对象数组，每个对象代表一条单独的线。

var newData = [
    {
        name: "y1",
        points: [ { x:0, y:1},{x:1,y:2}]
    },
    {
        name: "y2",
        points: [ { x:0, y:2},{x:1,y:2}]
    },
];

然后，您的 lineFunction 可以对 x 和 y 进行一般操作:

var lineFunction = d3.svg.line()
              .x(function(d){return d.x}
              .y(function(d){return d.y}
              .interpolate("linear")

然后，您可以将此数据绑定(bind)到可视化中的元素，并为每个数据条目添加路径:

var lines = svg.selectAll(".line").data(newData);

lines.enter().append("path")
             .attr("class","line")
             .attr("d",function(d) {
                 return lineFunction(d.points);
             });