Javascript 在现有SVG（d3.js v4）上应用缩放事件

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

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

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>

事实上，这一切似乎都是可行的，因为当我查看Google的代码检查器时，关注我的SVG元素，我看到平移和缩放的值在向前/向后鼠标滚轮时发生了变化。但实际元素没有发生任何变化，这非常奇怪，因为我还尝试通过普通jQuery更改这些缩放/转换值，SVG通过正确缩放来响应

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

---

请注意，这里是函数的官方文档。

将id添加到g元素，并对其应用缩放，而不是svg根如果要将属性转换应用到

svg

，则不是这样。在jquery示例中，将样式转换应用于

svg

，这是有效的。通常的

d3

方法是将缩放区域包装在

g

中，并对其应用属性变换。此外，您的翻译中缺少逗号：

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

---

d3.event.transform.x+“”+d3.event.transform.y//用g包装并应用转换现在可以工作了：。仍然是一个错误，当我在路径上缩放时，缩放行为正确，但当我在不包括路径的
标记区域上鼠标滚轮时（但这不是这个问题的目的）。编辑：我必须绑定
g.call（d3.drag（）.on（'drag'，function（）{/*…*/}））在刻度之前修复此问题。
d3.event.transform.x + " " + d3.event.transform.y //<-- there should be a comma in there