javascript - D3 缩放不断地向下和向右缩放 SVG，我该如何解决这个问题？

Question

我有一张地理 map ，我正在尝试使用 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