Question

请参阅以下示例：

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));
}

Answer 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变量。

D3 v4 - 画笔和缩放 - 重新缩放y轴

1 个答案: