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

Question

我正在尝试在内联 svg 上使用 d3.zoom，特别是美国地图（请注意，我对 d3js 非常缺乏经验）。经过一番研究，我找到了一个使用 d3.zoom https://www.datamake.io/blog/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>

这是JavaScript

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());
}

我不知道我做错了什么。是语法错误吗？我只是错过了代码的重要部分吗？帮助将不胜感激。

标签： javascriptsvgd3.js