Question

期望

初始图表显示csv的完整数据和预期输出是当我点击x轴下方的按钮时，假设我点击“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

您必须在translate来电时指定scale以及transform。

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

D3js按钮onclick功能可缩放特定时间范围内的图表

1 个答案: