设置转换翻译<g>使用 JavaScript

Question

我为转换<g>是

const svg = d3.select('target-svg')
const g = d3.select('target-g')

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

现在，我正在尝试使用以下示例 javascript 代码设置<g> svg 标记的转换属性。

g.attr('transform', 'translate(100, 100) scale(1)')

问题是<g>标签转换得很好，但是当使用鼠标滚轮放大和缩小时， <g>被转换为原点位置。

例如，如果<g>的 translate 的原点坐标是 (0, 0) 并且我将其转换为 (100, 100)，则<g>的 (x, y) 位于 (100, 100)。 但是当我缩放它时， <g>会回到 (0, 0)。

我怎样才能阻止它？

Answer 1

D3 缩放行为不会跟踪元素的变换属性——毕竟，缩放行为可能不会改变它（在画布上缩放、在缩放时更改颜色或形状、数据粒度、对不同元素应用缩放而不是一个触发事件，等等）。

当您将与变换d3.event.transform你所申请的当前缩放变换，这与翻译的开始[0,0]和规模1 。 换句话说，除非您另外指定，否则具有 d3 缩放行为的默认初始缩放事件将始终与此初始状态相关。 这就是缩放与手动设置元素的变换值无关的原因。

要统一手动设置的变换属性和缩放行为的变换，请使用缩放来管理两者。 您可以使用缩放行为手动设置g的变换属性：

var transform = d3.zoomIdentity.translate([100,100]).scale(1);
svg.call(zoom.transform, transform);

第一行操作一个 d3 缩放标识来创建一个新的变换。 第二行应用它，在过程中调用一个缩放事件，触发一个 zoom.on 事件。

通过这种方法，缩放管理手动变换和基于事件的变换的使用，因此缩放永远不会过时或“不知道”当前应用于选择的变换。

总而言之，这可能如下所示：

 var svg = d3.select('body') .append('svg') .attr('width',500) .attr('height',400) var g = svg.append('g'); var rect = g.append('rect') .attr('x', 750) .attr('y', 100) .attr('height',50) .attr('width',50); var zoom = d3.zoom() .on('zoom', function() { g.attr('transform',d3.event.transform); }) var initialTransform = d3.zoomIdentity .translate(-700,-40) svg.call(zoom); svg.call(zoom.transform,initialTransform);

 <script src="https://d3js.org/d3.v5.min.js"></script>