更新拉丝面积图的 y 轴

我正在使用 d3.js，并且我正在通过修改来处理拉丝面积图这个例子 http://bl.ocks.org/1667367。除了根据画笔改变 x 轴之外，我还希望根据画笔内数据的 y 值重新绘制图表的 y 轴（类似于).

我已经使该功能正常工作，但只是以一种能够在 x 和 y 空间中绘制画笔的方式。我通过首先添加 y 比例来做到这一点brush多变的：

var brush = d3.svg.brush()
    .x(x2)
    .y(y2)
    .on("brush", brush);

这使得brush.extent()返回以下多维数组：[ [x0, y0], [x1, y1] ]。然后我在中使用这些数据brush()函数重新定义焦点图的 x 和 y 域：

function brush() {
  var extent = brush.extent();
  x.domain(brush.empty() ? x2.domain() : [ extent[0][0], extent[1][0] ]);
  y.domain(brush.empty() ? y2.domain() : [ extent[0][1], extent[1][1] ]);
  focus.select("path").attr("d", area);
  focus.select(".x.axis").call(xAxis);
  focus.select(".y.axis").call(yAxis);
}

这是可行的，但通过在画笔变量中定义 y 比例，用户现在可以拖动焦点图表中的“框”，而不是像原始图表中那样只能从西向东拖动。

本质上，我的问题是：如何获取画笔区域内的值范围，而不是画笔区域本身的范围？这可能吗？

d3的刷机文档是here https://github.com/mbostock/d3/wiki/SVG-Controls#wiki-brush.

我想出了一个解决方案。

我使用刷式过滤的 x.domain 来过滤我的原始数据集。这个新的过滤数据集仅包含属于画笔的值：

// Use x.domain to filter the data, then find the max and min duration of this new set, then set y.domain to that
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  var dataFiltered = data.filter(function(d, i) {
    if ( (d.date >= x.domain()[0]) && (d.date <= x.domain()[1]) ) {
      return d.duration;
    }
  })
  y.domain([0, d3.max(dataFiltered.map(function(d) { return d.duration; }))]);

最后，请务必重新绘制 y 轴和 x 轴：

focus.select("path").attr("d", area);
focus.select(".x.axis").call(xAxis);
focus.select(".y.axis").call(yAxis);