使用 d3 在移动设备上缩放触摸答案

【问题标题】：Zoom touch on mobile with d3使用 d3 在移动设备上缩放触摸
【发布时间】：2016-06-25 13:17:36
【问题描述】：

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

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

当我点击放大时（移动设备将通过触摸进行管理）我一切都消失了......

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

重新绘制图形，但它不绘制任何东西！

我不知道该怎么办...

【问题讨论】：

你会付钱给别人吗？如果是这样，这不是那个网站。向我们展示您的尝试，我们将为您指明正确的方向。我们不是来做你的工作，而是更重要的是，就像我说的那样，为你指明正确的方向并告诉你哪里出了问题
我没有要求做我的工作，但我要求一个例子来学习，如果我伤害了解释我道歉！我没有在缩放方面做任何工作，因为我找不到适合我的情况的任何类型......如果有人弄错了，我再次道歉！
不用道歉，你现在知道了：P 至于缩放看看这些：bl.ocks.org/mbostock/6123708 github.com/mbostock/d3/wiki/Zoom-Behavior第一个是缩放和平移，第二个实际上是缩放行为作品。对于你的，你说你想放大 x 轴的点击？在 xaxis 上附加一个事件监听器（'click'）并切换缩放（即切换比例，比如在 1 和 2 之间切换，以便放大和缩小。您确实需要向我们提供更多关于您想要什么的信息。没有双倍点击很容易在网上找到
这是一个例子； stackoverflow.com/questions/11786023/…d3.select("svg").on("dblclick.zoom", null);

标签： javascript jquery d3.js

【解决方案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' 对象除了坐标轴外，还需要不放出图形。

【讨论】：

【解决方案2】：

你可以在网上找到你想要的所有信息。

例如缩放：

同时缩放和平移：https://bl.ocks.org/mbostock/6123708

缩放的工作原理：https://github.com/mbostock/d3/wiki/Zoom-Behavior

像你说的防止双击：How to disable double click zoom for d3.behavior.zoom?

像这样工作：d3.select("svg").on("dblclick.zoom", null);

你说你想放大点击 x 轴？需要更多关于你真正想要什么的信息。你想切换缩放吗？如果是这样的话：

xaxis.on('click', toggleZoom);

var zoomIn = false;

function toggleZoom() {
  var thisScale;
  if (zoomIn) {
    thisScale = 1;
    zoomIN = false;
  } else {
    thisScale = 2;
    zoomIn = true;
  }
  //container is your container of the chart, not your axis
  container.attr("transform", "scale(" + thisScale + ")");
}

基本上，这通过检查您是否已经放大，如果您还没有按 2 的比例放大，如果您已经放大，则将我们放大到原始状态。

【讨论】：