根据新日期更新d3范围

Question

我对d3.js还不熟悉，我正在尝试创建一个可以根据新的日期集进行更改的线条图。

我的数据从1985年到2015年，我想为整个范围创建一个线条图，然后点击，放大到一个特定的时间段(2000-2005年)。我已经设法放大和更改日期范围(x轴)，但我也需要根据这些新日期的数据更新y轴的范围。根据这段时间的数据，我很难更新y轴的范围。

我的数据如下：

F_OCURRENCIA_HECHO,displacement
1985-01-01,6.0
1985-02-01,1.0
1985-04-01,1.0
...
2015-10-01,,309.0
2015-11-01,106.0
2015-12-01,46.0

到目前为止，我更新图形的部分如下所示：

svg.on("click", function() {
x.domain([new Date(2000,01,01), new Date(2005,01,01)]);
y.domain(d3.extent(data, function(d) { return d.displacement; }));
var t = svg.transition().duration(750);
t.select(".y.axis").call(d3.axisLeft(y)); 
t.select(".x.axis").call(d3.axisBottom(x)).select(".domain").remove();
t.select(".line").attr("d", line);
});

如何使y.domain(d3.extent(data, function(d) { return d.displacement; }));根据新的日期获得范围？

任何帮助都将不胜感激。谢谢!

Answer 1

尝试使用两个日期之间的数据点计算y.domain：

svg.on("click", function() {
  var startDate = new Date(2000,1,1)
  var endDate = new Date(2005,1,1)
  var activeData = data.filter(function(d){
    return startDate <= d.F_OCURRENCIA_HECHO && d.F_OCURRENCIA_HECHO <= endDate })

  x.domain([startDate, endDate]);
  y.domain(d3.extent(activeData, function(d) { return d.displacement; }));

  ...