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

D3.js缩放translationTo问题

0 个答案: