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

【问题标题】：Apply zoom event on existing SVG (d3.js v4)在现有 SVG (d3.js v4) 上应用缩放事件
【发布时间】：2016-08-04 16:19:28
【问题描述】：

我尝试在 d3.js（版本 4）中使我的 SVG 可缩放。

你可以在这里看到我的尝试：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>

$(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 元素时，一切似乎都有效，我看到 translate 和 scale 的值随着鼠标滚轮向前/向后而变化。但是实际元素没有发生任何事情，这很奇怪，因为我还尝试通过纯 jQuery 更改这些缩放/转换值，并且 SVG 通过正确缩放来响应。

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

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

【问题讨论】：

标签： javascript jquery d3.js svg zooming

【解决方案1】：

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

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

【讨论】：

包装在 g 中并应用转换现在可以工作了：JSFiddle Updated。仍然是一个错误，当我放大我的路径时，缩放行为正确，但当我在不包含路径的 <g> 标记区域上鼠标滚轮时（但这不是这个问题的目的）。
编辑：我必须在秤之前绑定g.call(d3.drag().on('drag', function() { /* ... */ }))); 才能解决这个问题。

【解决方案2】：

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

【讨论】：