D3 scale.invert() 不返回 x 的日期

Question

我正在尝试使用此方法为当前鼠标位置的 x 值获取最接近的 y 值。

我的数据集如下所示：

linedata = [{amount:100,date:'2015-11-2'},
            {amount:-1000,date:'2015-11-3'},
            {amount:5000,date:'2015-11-4'}
            ...
           ]

我有一个画得很好的折线图，我只是在玩如何scale.invert()和平分工作。我创建了一个二等分函数：

var bisectDate = d3.bisector(function(d) { return d.date; }).left;

然后，再往下，绘制图形后，我在绘制图形的区域上放了一个矩形

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

然后mousemove()函数定义如下：

function mousemove() {
    var xPosition = xScale.invert(d3.mouse(this)[0]), //<-- give me the date at the x mouse position
        closestElement = bisectDate(linedata, xPosition, 1), //<-- use the bisector to search the array for the closest point to the left and find that point given our mouse position
        d0 = linedata[closestElement - 1]
        d1 = linedata[closestElement],
        d = xPosition - d0.date > d1.date - xPosition ? d1 : d0;
    focus.attr("transform", "translate(" + xScale(+line_dateFormat.parse(d.date)) + "," + yScale(d.amount) + ")");
    focus.select("text").text(d.amount);
};

我遇到的问题是，mouseover()函数中的这一行：

var xPosition = xScale.invert(d3.mouse(this)[0])

不是返回日期，而是返回一个数字，例如矩形的像素宽度。下一行，二等分，无法将此数字与日期进行比较，因此最终始终为 1。

我希望xPosition是这样的日期：

Sat Jul 19 2014 09:32:43 GMT+1000 (AEST)
Sat Jul 19 2014 07:28:21 GMT+1000 (AEST)
Sat Jul 19 2014 05:24:00 GMT+1000 (AEST)
Sat Jul 19 2014 03:50:43 GMT+1000 (AEST)
Fri Jul 18 2014 22:39:49 GMT+1000 (AEST)
Fri Jul 18 2014 14:53:27 GMT+1000 (AEST)

或者像这样：

1446382800000
1446382800000
1446382800000
1446382800000

但我得到这样的东西：

531.190359375
472.78146093749996
408.8622890625
358.1677734375
333.92257031249994

显然，我做错了，但我不明白为什么。谁能向我解释为什么我得到的是数字而不是日期？

Answer 1

使用 Nithin CV Poyyil 推荐的方法来确定实际数据的输出，为了解决这个问题，我必须做两件事。

1 - 在我的后端应用程序中，将日期从“2015-11-02”等字符串转换为以毫秒为单位的纪元时间，然后将其发送到 d3.js 使用的视图。这使得工作变得更容易，可能应该从现在开始一直这样做直到永远。

2 - 我不擅长 javascript 并且不了解范围。所以我只是将所有必需的功能集中（并复制）到鼠标悬停功能中，如下所示：

function mousemove() {
    var xScale = d3.time.scale()
    .domain([d3.min(linedata, function(d) { return d.date; }), d3.max(linedata, function(d) { return d.date; })])
    .range([0, w + 170] );

    var yScale = d3.scale.linear()
    .domain([amount_min, amount_max])
    .range([h, 0])
    .nice();

    var bisectDate = d3.bisector(function(d) { return d.date; }).left;
    var dateFormat = d3.time.format('%d. %b')

    var xPosition = xScale.invert(d3.mouse(this)[0]),//xScale.invert(d3.mouse(this)[0]), //<-- give me the date at the x mouse position
        closestElement = bisectDate(linedata, xPosition, 1), //<-- use the bisector to search the array for the closest point to the left and find that point given our mouse position
        d0 = linedata[closestElement - 1],
        d1 = linedata[closestElement],
        d = xPosition - d0.date > d1.date - xPosition ? d1 : d0;

    focus.attr("transform", "translate(" + xScale(d.date) + "," + yScale(d.amount) + ")");
    focus.select("text").text("Amount: " + d.amount + " Date: " + d.date);
};

这不是“正确”的方法，但我得到了我想要的结果，这对我来说更重要。谢谢您的帮助！