d3.bisector, использующий объект Date(), не разрешается

Question

Демо jsFiddle

У меня есть базовый линейный график d3, используя простой массив JSON UNIX timestamp и плавать value данные, например:

"value": 10.04,"time": 1401185375354 [...]

Это отметка времени (time) данные преобразуются в Date() Объект до генерации графа. Все хорошо, пока я не хочу добавить маркер при наведении курсора. Для того, чтобы получить правильный y значение, я прибегаю к использованию bisector и передавая значение x в текущей точке зависания. Как таковой у меня сейчас есть:

var bisect = d3.bisector(function(data) {
  return data.time;
}).right;

Тогда в функции наведения:

var timestamp = xScale.invert(mouse[0]),
    index = bisect(data, timestamp),
    startDatum = data[index - 1],
    endDatum = data[index],
    interpolate = d3.interpolateNumber(startDatum.value, endDatum.value),
    range = endDatum.timestamp - startDatum.timestamp,
    valueY = interpolate((timestamp % range) / range);
    marker.attr('cy', yScale(valueY));

Но биссектриса возвращает недопустимые значения, предполагая, что она не может приравнять переданный аргумент (объект даты) к элементу массива. Любая помощь будет оценена, полный код ниже:

HTML

<svg id="graph"></svg>

d3

var JSONData = [{
    "value": 10.04,
        "time": 1401185375354
}, {
    "value": 0.02,
        "time": 1401185374854
}, {
    "value": 1.61,
        "time": 1401185373854
}, {
    "value": 8.47,
        "time": 1401185373353
}, {
    "value": 1.65,
        "time": 1401185372852
}, {
    "value": 0.46,
        "time": 1401185371852
}, {
    "value": 3.17,
        "time": 1401185370888
}]
JSONData.forEach(function (d) {
    d.time = new Date(d.time);
});
data = JSONData.slice();
var margin = 45,
    width = parseInt(d3.select("#graph").style("width")) - margin * 2,
    height = parseInt(d3.select("#graph").style("height")) - margin * 2;

var timeFormat = d3.time.format("%I:%M:%S");

var xMin = d3.min(data, function (d) {
    return Math.min(d.time);
});
var xMax = d3.max(data, function (d) {
    return Math.max(d.time);
});

var yMin = d3.min(data, function (d) {
    return Math.min(d.value);
});
var yMax = d3.max(data, function (d) {
    return Math.max(d.value);
});

var xScale = d3.time.scale().domain(d3.extent(data, function (d) {
    return d.time;
})).range([0, width]);

var yScale = d3.scale.linear().domain(d3.extent(data, function (d) {
    return d.value;
})).range([height, 0]);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickFormat(timeFormat);

var yAxis = d3.svg.axis().scale(yScale).orient("left");

var line = d3.svg.line().x(function (d) {
    return xScale(d.time);
}).y(function (d) {
    return yScale(d.value);
});

var line2 = d3.svg.line().x(function (d) {
    return xScale(d.time);
}).y(function (d) {
    return yScale(d.askPrice);
});

var graph = d3.select("#graph").attr("width", width + margin * 2).attr("height", height + margin * 2).append("g").attr("transform", "translate(" + margin + "," + margin + ")");

graph.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);

graph.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end");

graph.append("path").datum(data).attr("class", "line").style('pointer-events', 'none').attr("d", line);

graph.append("path").datum(data).attr("class", "line2").style('pointer-events', 'none').attr("d", line2)

var marker = graph.append('circle').attr('r', 7).style('fill', '#FFFFFF').style('pointer-events', 'none').style('stroke', '#FB5050').style('stroke-width', '3px');

graph.append("rect").attr("class", "overlay").attr("width", width).attr("height", height).on("mouseover", function () {
    focus.style("display", "block");
}).on("mouseout", function () {
    focus.style("display", "none");
}).on("mousemove", update);

var bisect = d3.bisector(function (date) {
    return date.time;
}).right;

function update() {
    var mouse = d3.mouse(this);
    marker.attr('cx', mouse[0]);
    /* the issue is with the below */
    var timestamp = xScale.invert(mouse[0]),
        index = bisect(data, timestamp),
        startDatum = data[index - 1],
        endDatum = data[index],
        interpolate = d3.interpolateNumber(startDatum.value, endDatum.value),
        range = endDatum.timestamp - startDatum.timestamp,
        valueY = interpolate((timestamp % range) / range);
    marker.attr('cy', yScale(valueY));
}

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family:arial;
    font-size:11px;
    color:#AAAAAA;
    overflow:hidden;
}
.overlay {
    fill: none;
    pointer-events: all;
}
.axis path, .axis line {
    fill: none;
    stroke: #555;
    shape-rendering: crispEdges;
}
.axis text {
    fill: #555;
}
.line {
    fill: none;
    stroke: red;
    stroke-width: 1.5px;
}

Answer 1

Есть несколько проблем с вашим текущим кодом:

• d3.bisect работает только на отсортированных данных. Исправлено с data.sort(function(a, b) { return a.time - b.time; });
• В функции наведения мыши, вы ссылаетесь на несуществующий .timestamp атрибут вместо .time,
• Расчет значения интерполяции неверен. Должно быть interpolate((timestamp - startDatum.time) / range);

Полная демонстрация с исправлениями здесь. Вы также можете найти этот пример полезным.