Javascript d3.js直线和面积图-希望添加一条由两点定义的额外直线，表示阈值/最小值（便于查看）

我有一个正在工作的d3.js可视化，它以复合线和面积图的形式显示数据返回率(http://anf.ucsd.edu/tools/data_return_rates/)

x轴为时间，y轴为数据返回率百分比。您可以单击可视化顶部的各种按钮在数据集（仅解析的JSON文件）之间切换

除了原始数据图之外，我还想添加一条简单的线来定义所需的最小数据返回率（85%）。这纯粹是一种视觉帮助，帮助用户确定数据返回率是否高于此最小值/阈值。我使用数据集上的d3.min（）和d3.max（）方法计算这条“极小值”线（只有两个点）的x值（时间）。y值仅为整数（85）：

（我做了一些其他转换以确保一切正常）

现在，在我想要将这条最小线添加到可视化之前，我只是做了以下工作来创建面积和线图，这很有效：

svg.select("path.area").data([data]);
svg.select("path.line").data([data]);

脚本后面还有一些其他打印代码：

svg.select("path.area").attr("d", area);
svg.select("path.line").attr("d", line);

我读过的所有d3.js示例都说，要创建多行，只需使数据数组具有所有要绘制的数据集，因此在我上面的示例中，这是：

svg.select("path.line").data([data]);

变成：

svg.select("path.line").data([data, min_data_return]);

这应该行得通。然而，事实并非如此。我看到数据集线像以前一样绘制，但不是min_data_返回线

你知道我做错了什么吗

要点如下：

在要点中，查看第133-140行（搜索注释字符串选项）。这些是唯一与此工作相关的行。为了完整起见，我把整个剧本编入了要点

---

提前谢谢

＞P> >并不是试图将参考线和数据线并列，而是考虑单独绘制它们：

svg.append("svg:path")
    .attr("class", "minline")
    .attr("clip-path", "url(#clip)");   
...
svg.select("path.minline").data([min_data_return]);
...
svg.select("path.minline").attr("d", line);

---

jshiddle这里有完整的例子：

hijosh。非常感谢您的评论和提琴！你的代码成功了。非常感谢。我的d3技能现在还很初级。。。

svg.append("svg:path")
    .attr("class", "minline")
    .attr("clip-path", "url(#clip)");   
...
svg.select("path.minline").data([min_data_return]);
...
svg.select("path.minline").attr("d", line);