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

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用d3.js计算给定x的y值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经使用d3.js定义了一个线生成器,如下所示:
  1. var line = d3.svg.line()
  2. .interpolate("monotone")
  3. .x(function(d) {return x(d.date); })
  4. .y(function(d) {return y0(d.visits); });

数据以csv格式读取,格式如下:

  1. date,visits
  2. 12/08/12,1
  3. 13/08/12,0
  4. 14/08/12,0
  5. 15/08/12,33
  6. 16/08/12,28

将csv文件加载到数据中,并解析为:

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

添加到文档中:

  1. svg.append("path")
  2. .datum(data)
  3. .attr("class","line")
  4. .attr("d",line)

在我的脚本的其他地方,我需要找出在特定日期的y值.所以例如,我可能想要得到一个y值为日期为15/08/12(相当于y0(33))的行.我该怎么做?

解决方法

您可以使用 bisect在数组中查找日期,然后调用y0函数.代码看起来像这样(从文档中可以看得很直接):
  1. var bisect = d3.bisector(function(d) { return d.date; }).right;
  2. ...
  3. var item = data[bisect(data,new Date(2012,8,15))];
  4. y0(item.visits);

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

猜你在找的JavaScript相关文章