Добавить строку для значения y на основе значения max x

Question

Я пытаюсь провести горизонтальную линию от точки по оси Y на основе самой последней даты. Ex. В этом наборе данных я хотел бы нарисовать горизонтальную линию на 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) операции сортировки).

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.