在现有 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)');
});

事实上，一切似乎都有效，因为当我检查 Google 的代码检查器时，专注于我的 SVG 元素，我看到平移和缩放的值随着鼠标滚轮的变化而变化 forward/backward.但是实际元素没有任何变化，这很奇怪，因为我还尝试通过普通 jQuery 更改那些 scaling/translating 值，并且 SVG 通过正确缩放进行响应。

任何人都可以为我指出正确的方向来完成这项任务吗？

作为记录，这里是 d3.zoom() 函数的官方文档。

Answer 1

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

Answer 2

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

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

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

Apply zoom event on existing SVG (d3.js v4)

javascript

jquery

svg

zooming

d3.js