D3.js踩坑记录——关于d3.zoom更改transform无效

D3.js的最新v4版提供了d3.zoom模块，用它可以给svg图形增加缩放/移动的特性，但通过非鼠标/触控的方式改变图形的位置和缩放比例后，d3.zoom的行为就变得不正常了。本文给出一个解决方法。

我们一般设置拖动窗口的代码如下

 this.svg.call(
      d3.zoom().on('zoom', ({ transform }) => {
        this.g.attr('transform', transform)
      })
    )

这样我们就可以拖动和缩放我们的窗口了

但如果我们需要去移动窗口去将某些节点定位的话我们更改transform之后有趣的是我们更改完视图位置后，界面也确实实现了效果，但是再用鼠标或者触控板调整图形时，zoom行为并不会从更改之后的位置开始计算下一个d3.event.transform，zoom行为似乎自己保存了上一次的transform，而不关心我们更改到视图上的transform。

 this.g
     .transition()
     .duration(500)
     .attr(
       'transform',
        d3.zoomIdentity
        .translate(this.width / 2 - el.x, this.height / 2 - el.y)
        .scale(1)
       )

从官方文档可以看到，结果就是