我有一棵像这样的“径向蒂迪树”： https://bl.ocks.org/mbostock/4063550

我试图增加缩放和摇摄，但我无法使缩放和摇摄工作正常。

我的代码如下所示：

var width = 1000,
    height = 800;
var zoom = d3.zoom()
    .scaleExtent([1 / 2, 4])
    .on("zoom", zoomed);
var svg = d3.select('.svg-container').append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr('preserveAspectRatio', 'xMinYMin')
    .call(zoom);
var g = svg.append("g").attr(
    "transform",
    "translate(" + width / 2 + "," + height / 2 + ") scale(1)"
function zoomed() {
    g.attr(
      "transform",
      d3.event.transform
}

当我第一次拖动或滚动时， g 元素跳到左上角的 。第一个d3.event.transform输出如下：

{k: 1, x: 0, y: 0}

如果我在那之后放大或平移，它就可以正常工作了。

当我尝试这个：

function zoomed() {
    var x = (width / 2) + d3.event.transform.x;
    var y = (height / 2) + d3.event.transform.y;
    g.attr(
      "transform",
      "translate(" + x + "," + y + ") scale(" + d3.event.transform.k + ")"
}

G元素不会跳转到左上角，平移操作也很好，但是缩放不会根据鼠标的位置进行缩放(只有当鼠标位于左上角时才能正确工作)。