D3 v4 - 画笔和缩放 - 重新调整 y 轴答案

【问题标题】：D3 v4 - Brush and Zoom - rescale y axisD3 v4 - 画笔和缩放 - 重新调整 y 轴
【发布时间】：2017-11-05 16:12:52
【问题描述】：

请看下面的例子：

http://nvd3.org/examples/lineWithFocus.html

当图表放大时，y 轴会调整并缩放到当前可见的数据。

请参阅以下适用于 D3 v4 的示例：

https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

请注意，当数据放大时，y 轴不会调整，无论是通过扩展/缩小刷过的区域，还是通过鼠标滚轮进行缩放。

我在这里把它设置为小提琴：

http://jsfiddle.net/r19LL1a4/4/

有没有人知道如何实现这一点？

我假设以下代码部分需要调整以更新 yAxis，但我不知道该怎么做。

function zoomed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
  var t = d3.event.transform;
  x.domain(t.rescaleX(x2).domain());
  focus.select(".area").attr("d", area);
  focus.select(".axis--x").call(xAxis);
  context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}

【问题讨论】：

标签： d3.js

【解决方案1】：

我已经用一个可能的解决方案更新了小提琴：

http://jsfiddle.net/r19LL1a4/40/

至少对于缩放功能：

function zoomed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
  var t = d3.event.transform;
    x.domain(t.rescaleX(x2).domain());
  var domain= x.domain();

  y.domain([d3.min(dataperm.map(function(d) {     
          if(parseInt(d.date.getTime())> parseInt(domain[0].getTime()) && parseInt(d.date.getTime()) < parseInt(domain[1].getTime())){
          return parseFloat(d.price);  
          }})), d3.max(dataperm.map(function(d) { 

          if(parseInt(d.date.getTime())> parseInt(domain[0].getTime()) && parseInt(d.date.getTime()) < parseInt(domain[1].getTime())){
          return d.price;
    }}))]);   

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

  context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}

数据需要保存到全局变量dataperm中。然后可以应用 x 域来获取当前域的最小和最大 y 变量。

【讨论】：