Question

我有一个＆＃39; Radial Tidy Tree＆＃39;像这样：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。

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

1 个答案: