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

Question

我有一组这种格式的数据：

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

我想在 line 函数的帮助下使用 d3 来绘制它。

所以，我在我的 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))

效果很好。但是，我现在如何绘制第二条线？我当然可以为 y 值创建一个 returns d.y2 的新 lineFunction，但这完全违背了 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")

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

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

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

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

How do you create a d3 line function that will draw 2 lines for x, y1, y2 data?

javascript

data-visualization

line

d3.js