javascript - 如何使用 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)）。我怎样才能做到这一点？

score 12 · Accepted Answer

您可以使用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);

请注意，这种方法需要对您的日期进行排序，它们在您的示例数据中。

score 4 · Accepted Answer

编辑

借鉴 Lars 的示例，稍作调整以避免 -1 hack：

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

原帖

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

2 回答 2