Javascript 如何让d3.zoom为内联svg工作？

我试图在内嵌svg上使用d3.zoom，特别是在美国地图上（请注意，我对d3js非常缺乏经验）。经过一些研究，我找到了一个使用d3.zoom的简单教程

我现在的问题是它根本不起作用。没有显示任何错误。它什么也不做

下面是带有svg映射的HTML代码

   <div id="map">

      <?xml version="1.0" encoding="UTF-8"?>
      <svg id="usa_svg" height="800" width="1200" version="1.1" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">

        <g id="USA">
          <rect height="600" width="1200"></rect>
          <!-- paths here -->
        </g>

      </svg>

   </div>

---

我不知道我做错了什么。这是语法错误吗？我只是缺少了代码的一个重要部分吗？非常感谢您的帮助。

您不能启用zoom，请启用整个：

svg.call（zoom）我已经这样做了，现在只要使用scroll，它就会显示一系列错误
未捕获类型错误：d3.event未定义
您可能使用d3 V6。如果是这样，请将事件传递给缩放的MichaelRovinsky，谢谢！现在可以了。
var usa = d3.select("svg")
var rect = d3.select("rect");
var zoom = d3.zoom().on("zoom", zoomed);

rect.call(zoom);

function zoomed() {
  var transform = d3.event.transform;
  usa.attr("transform", transform.toString());
}