第一个缩放事件删除中心变换

Question

我有一个像这样的'Radial Tidy Tree':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
    );
}

当我拖动或滚动的非常第一次,所述克元件跳到左上角.第一个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 + ")"
    );
}

在摹元素不跳到左上角和平移工作正常,但变焦不变焦基于鼠标的位置(只正常工作时,鼠标在左上角).

Answer 1

由于d3存储元素可以放大元素本身,因此需要知道所有变换都将成为缩放的一部分.在您的情况下,您通过.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
    );
}

工作实例.