d3.js - 第一个缩放事件移除中心变换

Question

我有一个像这样的“径向整洁树”: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 元素不会跳到左上角并且平移工作正常，但缩放不会根据鼠标位置进行缩放(仅当鼠标位于左上角时才能正常工作)。

Answer 1

自 d3存储元素缩放 itself ，它需要知道将成为缩放一部分的所有变换。在您的情况下，您已经通过 .attr 设置了初始位置调用(而不是缩放)，所以 d3不知道。要通过缩放设置它，请执行以下操作:

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");

// set initial position via zoom
svg.call(zoom.transform, d3.zoomIdentity.translate(width/2, height/2));

function zoomed() {
    g.attr(
      "transform",
      d3.event.transform
    );
}

工作 example .