Javascript d3js跳跃缩放行为

我正在研究d3js版本4库，在处理缩放行为时遇到了以下问题

在通过单击svg触发编程缩放后，使用鼠标滚轮进行缩放时，会导致laagy/jumpy行为，失去其位置

我找到了这个堆栈溢出资源：我想这可能会对我有所帮助。但事实并非如此

我举了一个简单的例子，让你明白我的意思。 我错过了什么

$document.readyfunction{ var svg=d3。选择“svg”； 变量组=d3。选择“gcontent”； svg.call d3.zoom.scaleExtent[1,30]。关于“缩放”，函数{ group.attr'transform'，d3.event.transform； } ; svg.on'click'，函数{ 组 过渡 .持续时间1000 .attrtransform，translate100100 scale2； }; };

---

这是因为在初始化缩放时，您正在从event.transform鼠标滚轮缩放事件设置缩放值，而在单击事件处理程序中，您正在为transform属性设置静态值

因此，下次发生缩放事件时，event.transform值和svg转换值将不同。所以它跳了起来

例如：您可以使用鼠标滚轮进行缩放。event.transform将为500x、500y、5k。 单击鼠标，变换属性将设置为100x、100y、2k。

---

下次执行鼠标滚轮事件时，event.transform将从500x、500y、5k更改为600x、600y、6k。但是，由于svg变换属性是100x、100y、2k，它看起来像是跳转了。

当您以编程方式应用缩放时，您应该这样做：

  svg.on('click', function() {
    svg.transition()
      .duration(750)
      .call(zoom.transform, d3.zoomIdentity
        .translate(100, 100) // set x and y transition
        .scale(2) // set scale value
      );
  });

请注意，平移必须在缩放之前应用

另外，请注意，d3缩放具有双击事件的默认缩放行为。如果不需要，可以使用以下代码禁用它：

svg.on("dblclick.zoom", null);

工作演示：

$document.readyfunction{ var svg=d3。选择“svg”； 变量组=d3。选择“gcontent”； var zoom=d3.zoom.scaleExtent[1,30]。在“zoom”上，函数{ group.attr'transform'，d3.event.transform； }; svg.callzoom； svg.ondblclick.zoom，空； svg.on'click'，函数{ svg.transition .持续时间750 .callzoom.transform，d3.zoomIdentity .翻译100100 .scale2 ; }; };

---

那些被否决的人，你能解释一下原因吗。我也面临着同样的问题，我很确定这就是我没有投你反对票的原因。我重视你的意见，并会考虑解决它。你有没有可能为你的论文提供一个例子？可能是因为D3精神错乱综合症。哇！很好！这似乎奏效了。。。然而，我在手册中读到，.scale和.translate的顺序很重要。请注意，转换的顺序很重要！平移必须在缩放之前应用。我可以证实这句话是正确的。我把scale.translate的顺序换成translate.scale，效果很好。介意更新你的答案吗？我会把它标记为正确答案？