3

我有一个有效的 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 中。

提前致谢！

4

1 回答 1

5

与其尝试将参考线和数据线一起绘制，不如考虑分别绘制：

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/

于 2012-05-13T15:51:39.950 回答