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

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