在现有SVG上应用缩放事件(d3.js v4)

Question

我试图让我的SVG在d3.js（版本4）中缩放。

你可以在这里看到我的尝试：JSFiddle

HTML

<svg id="mySVG" width="800px" height="600px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: lightgrey;">
  <g>
    <path d="M 0 0 L 100 0 L 100 20 L 0 20 Z" fill="red"></path>
    <path d="M 500 500 L 600 500 L 600 520 L 500 520" fill="green"></path>
  </g>
</svg>

JS

$(function() {
    var svg = d3.select("#mySVG")
  .call(d3.zoom().on("zoom", function () {
    svg.attr("transform", "translate(" + d3.event.transform.x + " " + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")");
  }));
  // For test purposes
  //$('#mySVG').css('transform', 'scale(2)');
});

事实上，这一切似乎都起到了作用，因为当我检查谷歌的代码检查器时，专注于我的SVG元素，我看到translate和scale的值随着鼠标向前/向后移动而变化。但实际元素没有发生任何变化，这很奇怪，因为我还试图通过普通jQuery更改这些缩放/转换值，SVG通过正确缩放进行响应。

有人能为我指明这项任务的正确方向吗？

这里是d3.zoom()函数的官方文档，仅供参考。

Answer 1

您正在将属性转换应用于svg，这是无效的。在jquery示例中，您将样式转换应用于svg，这是有效的。通常的d3方法是将缩放区域包裹在g中，并对其应用属性变换。此外，您的翻译中缺少一个逗号：

d3.event.transform.x + " " + d3.event.transform.y //<-- there should be a comma in there

Answer 2

向g元素添加一个id，并对其应用缩放，而不是svg根