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的行的y值（相当于y0(33)）。我怎么能这样做？

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

请注意，此方法要求对日期进行排序，这些日期位于示例数据中。

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，你可以使用附加在平分线上的.left函数而不是Lars'示例中的.right - 这样你就不必做你所做的-1 hack。

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

2 个答案: