javascript - D3js 按钮 onclick 函数可缩放特定时间范围内的图表

Question

期望

初始图表显示了 csv 的完整数据，预期输出是当我单击 x 轴下方的按钮时，假设我单击“1 小时”按钮，然后图表将根据数据重新缩放前1小时，其他按钮也是如此。

问题

当前的问题是，当我单击按钮时，图表将重新缩放到中间位置(随机数据)，而不是按钮上所述的特定位置(特定数据、exp(前 1 小时、3 小时等) .这是我单击按钮将图表缩放到特定时间范围的代码。

   function transition(zoomLevel) {
      svg.transition()
          .call(zoom.scaleTo, zoomLevel);
    }

    function timezoom(){

     x.domain([new Date(2017,1,11),new Date(2017,1,11)]).range([0,60]);
     y.domain([95000,d3.max(data, function(d) { return d.AGV_Mileage; })]);
     x2.domain(x.domain());
     y2.domain(y.domain());

     var svg = d3.select("body").transition();
     //
    }


    <input type="button"  id='1hr' onclick="timezoom()" value="1 Hour" />
   <input type="button"  id='3hr' onclick="transition(1.8)" value="3 Hours"/>

缩放行为在 plunker 编辑器中演示 - https://plnkr.co/edit/MY1nP4Mnv4WeCpHCxLvD?p=preview

请赐教并给我一个大概的想法。

Answer 1

您必须在 transform 调用中指定translate 以及scale。

function transition(newRange) {
  var rgh = d3.timeHour.count(initialDomain[0], initialDomain[1]);
  var k = rgh/newRange;
  var t = d3.zoomIdentity.translate(0,0).scale(k);
  svg.transition()
      .call(zoom.transform, t);
}

您还应该保存初始域以便计算新的比例:

  initialDomain = d3.extent(data, function(d) { return d.Timestamp; });

这是更新后的plnkr