Javascript 使用d3在手机上进行缩放触摸

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

重新绘制图形，但它不会绘制任何内容

---

我不知道该怎么办……

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

例如，缩放：

一起缩放和平移：

缩放的工作原理：

防止双击，如您所说：

工作原理如下：

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的比例放大，如果你已经放大，请将我们的图像放大到原始图像。
好吧，我做到了！
这是一项艰苦的工作，结果如下：

给出了缩放：

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”对象需要在轴之外不放出图形。
你打算付钱让别人来做吗？如果是这样的话，这个网站就不是这样的。向我们展示您的尝试，我们将为您指明正确的方向。我们不是来做你的工作的，但更多的是，就像我说的，为你指出正确的方向，告诉你哪里出了错我没有要求做我的工作，但我要求举个例子来学习，如果我受伤了，我道歉！我没有做任何关于缩放的工作，因为我找不到任何适合我的案例的类型。。。我再说一遍，如果有人弄错了，我道歉！不需要道歉，你现在知道了：关于缩放，看看这些：第一个是缩放和平移，第二个是缩放行为的实际工作方式。对于你的，你说你想在点击x轴时缩放？在xaxis上附加一个事件监听器（“单击”），并切换缩放（即切换比例，比如1和2之间，以便缩放。您确实需要向我们提供有关您想要的内容的详细信息。无双击在网上很容易找到。这是一个示例；d3.select（“svg”）。on（“dblclick.zoom”，null）；