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"/>

Zoom的行为已在Plunker编辑器-https：//plnkr.co/edit/my1np4mnv4mnv4mnv4mnv4mnv4wecphcxlvd？p = preview

请启发我，给我一个大概的想法。

Answer 1

您必须指定translate以及transform呼叫上的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