javascript - D3.js 缩放 translateTo 问题

Question

我在恢复转换参数并将其应用于 D3 视图时遇到问题。当我应用以前保存的变换参数来查看时。一切看起来都不错。但是，一旦您尝试拖动或缩放视图，视图就会跳跃。

这就是我的意思：

https://blockchaingraph.org/#ipfs-Qmdv3dEd5YUsiLv8GJ4ZEKYcBwPU6vKosqCXRWvR7LmcuE

图表加载后，尝试拖动视图，您会看到它跳跃。

这是我的代码：

svg = container.append('svg')
            .attr('width', '100%')
            .attr('height', '100%')
            .attr('class', 'graphd3-graph')
            .call(d3.zoom().on('zoom', function () {
                var scale = d3.event.transform.k;
                var translate = [d3.event.transform.x, d3.event.transform.y];
                svg.attr('transform', 'translate(' + translate[0] + ', ' + translate[1] + ') scale(' + scale + ')');
            }))
            .on('dblclick.zoom', null)
            .append('g')
            .attr('width', '100%')
            .attr('height', '100%');

......

var c = container.select(".graphd3-graph");
        svg.attr('transform', data.transform);
        d3.zoom().scaleTo(c, tra.k);
        d3.zoom().translateTo(c, tra.x, tra.y);

问题是如何在可拖动/可缩放的 D3 视图上正确应用变换？d3.zoom().scaleTo() 似乎正在工作，但 d3.zoom().translateTo() 完全被忽略了。

我正在使用 d3/5.7.0/d3.min.js

标签： javascriptd3.js