javascript - d3.js 折线图和面积图 - 想要添加一条由两点定义并代表阈值/最小值的额外线(以便于查看)

Question

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

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

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

var min_data_return = [ 
      {   
      "readable_time": d3.min(data, function(d) { return d.readable_time; }),
      "value": 85
      },  
      {   
      "readable_time": d3.max(data, function(d) { return d.readable_time; }),
      "value": 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_return 线。

知道我做错了什么吗？

要点在这里:https://gist.github.com/2662793

在 Gist 中，查看第 133 - 140 行(搜索注释字符串 OPTION)。这些是与使此工作相关的唯一行。为了完整性，我将整个脚本放入 Gist。

提前致谢!

Answer 1

与其尝试同时绘制引用线和数据线，不如考虑将它们分开绘制:

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);

JSfiddle 在这里有完整的例子:http://jsfiddle.net/qAHC2/6/