D3 缩放不断缩小 SVG 的右侧，我该如何解决这个问题？

Question

我有一张地理地图，我正在尝试将缩放功能添加到使用 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);
}

http://plnkr.co/edit/0S1OJr?p=preview

Answer 1

您应该转换 <group> 元素，而不是 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'
}

这是更新的插件：http://plnkr.co/edit/B0o0tULpve1rbpyRgFpz?p=preview