如何使用 d3.js 计算给定 x 的 y 值

Question

我使用 d3.js 定义了一个线段生成器，代码如下：

var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) {return x(d.date); })
    .y(function(d) {return y0(d.visits); });

数据从以下格式的csv文件中读取：

date,visits
12/08/12,1
13/08/12,0
14/08/12,0
15/08/12,33
16/08/12,28

将CSV文件加载到data中，并解析为:

data.forEach(function(d) {
    d.date = d3.time.format("%d/%m/%y").parse(d.date);
    d.visits = +d.visits;
});

并添加到文档中使用:

svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line)

在我的脚本的其他地方，我需要计算特定日期的y值。例如，我可能希望获取日期为15/08/12（相当于y0(33)）的直线的y值。我该怎么做？

- rudivonstaden

Answer 1

你可以使用 bisect 在数组中找到日期，然后调用 y0 函数。代码应该像这样（几乎完全从文档中复制）：

var bisect = d3.bisector(function(d) { return d.date; }).right;
...   
var item = data[bisect(data, new Date(2012, 8, 15))];
y0(item.visits);

请注意，此方法要求您的日期已经排序，而在您的示例数据中它们已经排序。

- Lars Kotthoff

---

谢谢，这个方法可行，不过实际上我需要使用item = data[bisect(data, new Date(2012, 8, 15))-1];。因为匹配是精确的，我需要在右边元素左侧的元素，因此需要减去1。有点不合规则，但它可行。在我的情况下，所有日期都有数据--如果不是这种情况，则此方法可能无效。 - rudivonstaden

Answer 2

编辑

继Lars的例子之后，稍作改动以避免-1黑客攻击：

var bisect = d3.bisector(function(d) { return d.date; }).left;
...   
var item = data[bisect(data, new Date(2012, 8, 15))];
y0(item.visits);

原始帖子

rudivonstaden，您可以使用bisector附加的.left函数，而不是Lars示例中的.right — 这样您就不必像之前所做的那样进行-1 hack。

- toobulkeh