根据max x值为y值添加行

Question

我正在尝试根据最近的日期从y轴的某个点绘制一条水平线。防爆。在此数据集中，我想在y=38处绘制一条水平线，其中date等于最近的日期（2013-12-15）。这就是我现在所拥有的，但它不起作用： http://jsfiddle.net/Z3CSn/1/

var recentDay = d3.max(data, function (d) { return d.date });

svg.append("line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1", yScale(recentDay.value));

以下是所需最终结果的模拟： https://dl.dropboxusercontent.com/u/23726217/line.PNG

Answer 1

您非常接近，但您的代码存在轻微的两个问题。

1. 当你提取recentDay时，d3.max只给你最近一天的日期，而不是全天的对象。获取Object的一种简单方法是只对日期进行排序，然后选择第一个，例如

   var recentDate = d3.max(data, function(d){ return d.date; })
   , recentDay  = data.filter(function(d){ return d.date == recentDate; })[0];
   

   我更喜欢按日期排序data并取第一个元素，因为这种方法只需要通过data进行两次线性迭代（而不是O（nlogn）排序操作）。 / p>

2. 您需要在行中包含y1和y2（默认情况下y2为0），例如

   svg.append("line")
        .attr("stroke", "#000")
        .attr("x1", 0)
        .attr("x2", width)
        .attr("y1", yScale(recentDay.value))
        .attr("y2", yScale(recentDay.value));
   

结合这两个变化，我得到下面的输出。这里还有一个更新的JSfiddle。