Javascript D3 zoom不断缩小SVG的右侧，如何解决这个问题？

我有一个地理地图，我正试图添加缩放功能，以使用D3。我可以缩放，但似乎每当我这样做时，它都会不断地缩小到光标所在位置的右侧。如何使其缩放到光标的位置

下面是我所有的代码。缩放功能位于“main.js”中。它在“map”变量中使用，并在该变量之后创建

 //create a new svg element with the above dimensions
var map = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .call(d3.zoom()
                .scaleExtent([1/2, 4])
                .on("zoom", zoomed));

//zoom function used above                
function zoomed() {
  map.attr("transform", d3.event.transform);
}

---

您应该转换

元素，而不是SVG：

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

//creating a group element named 'map':
var map = svg.append("g").call(d3.zoom()
    .scaleExtent([1 / 2, 4])
    .on("zoom", zoomed));

function zoomed() {
    map.attr("transform", d3.event.transform);
    //applying the transform to 'map'
}

---

这是最新的plunker:

非常感谢！看起来我还需要进一步研究如何在D3中正确地构造事物。@Dan实际上，这与SVG的关系比与D3的关系更大：如果将转换应用于整个SVG，会发生什么？你明白了吗？我不太明白你的意思。那不是我以前做的吗？我对这些东西也不是很了解，所以我可能只是感到困惑哈哈。没错：你翻译了整个SVG，这没有什么意义。您必须转换SVG中的元素。因此，这里的问题是更多地了解SVG，而不是D3。这就是我的观点。好吧，我明白了。谢谢你的建议！