javascript - 使用 d3 在移动设备上缩放触摸

Question

我用库 D3 构建了一个图表，现​​在我需要通过触摸 x 轴进行缩放，而不是像我在互联网上看到的那样通过双击进行缩放。我问你做吗？如果有可能，您可以从中学习如何做。非常感谢。戴夫

---

很遗憾，我根本无法放大!

我全部复制在:https://jsfiddle.net/1y408pzo/1/

当我点击缩放(移动将通过触摸管理)时，我的一切都消失了......

function redraw() {


zoom.x(x);

  d3.select(this)
      .transition()
      .ease("linear");
  svg.select(".xAxis").call(xAxis);
  svg.select(".yAxis").call(yAxis);
  svg.select(".grid").call(make_y_axis().tickSize(-width, 0, 0).tickFormat(""));
  svg.select(".data1").attr("d", lineFunction(data));
}

重新绘制图形，但它没有绘制任何东西!

我不知道该怎么办...

Answer 1

好吧，我做到了!这是一项艰苦的工作，结果在这里:https://jsfiddle.net/1y408pzo/9/

给出缩放:

var zoom = d3.behavior.zoom ()
.scaleExtent ([1, 12])
.x (x)
.on ('zoom', zoomHandler function () {

svg.select ('. x.axis')
.call (xAxis);

svg.selectAll ('. data1, circle'). attr ('transform', 'translate (' + d3.event.translate [0] + ', 0)'
+ 'Scales (' + d3.event.scale + ', 1)');

});

虽然 'defs' 对象需要不泄露图形和轴。