d3.bisector使用Date()对象无法解析 [英] d3.bisector using Date() Object does not resolve

问题描述

我有一个 basic d3折线图，它使用UNIX timestamp 的简单JSON数组并浮动 value 数据，例如:

I have a basic d3 line graph, using a simple JSON array of UNIX timestamp and float value data, e.g:

值":10.04，时间":1401185375354 [...]

在生成图形之前，此时间戳( time )数据将转换为 Date()对象.一切都很好，直到我想在悬停上添加标记.为了获得正确的 y 值，我求助于使用 bisector 并在当前悬停点传递 x 的值.因此，我目前有:

This timestamp (time) data is converted into a Date() object before the graph is generated. All is good until I want to add a marker on hover. In order to get the correct y value, I am resorting to using bisector and passing the value of the x at the current hover point. As such I currently have:

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

但是等分线返回无效值..表明它不能将传递的参数(日期对象)等同于数组项.任何帮助将不胜感激，完整代码如下:

But the bisector returns invalid values..suggesting it cannot equate the passed argument (date object) against an array item. Any help would be appreciated, full code below:

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

推荐答案

您当前的代码存在一些问题:

There are a few problems with your current code:

• d3.bisect 仅适用于排序的数据.使用 data.sort(function(a，b){return a.time-b.time;});
进行了修复
• 在鼠标悬停功能中，您引用的是不存在的 .timestamp 属性，而不是 .time .
• 插值的计算不正确.应该是 interpolate((timestamp-startDatum.time)/range);

• d3.bisect works only on sorted data. Fixed with data.sort(function(a, b) { return a.time - b.time; });
• In the mouseover function, you're referencing a non-existent .timestamp attribute instead of .time.
• The calculation of the interpolation value isn't correct. Should be interpolate((timestamp - startDatum.time) / range);

在此处中完成修复程序的演示.您可能还会发现此示例很有帮助.

Complete demo with fixes here. You may also find this example helpful.

这篇关于d3.bisector使用Date()对象无法解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！