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

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用d3.js计算给定x的y值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经使用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.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值.所以例如,我可能想要得到一个y值为日期为15/08/12(相当于y0(33))的行.我该怎么做?

解决方法

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

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

猜你在找的JavaScript相关文章