Question

注意:(与问题类似D3.js Set initial zoom level。但是他们的回答是针对v3的，而评论中的v4答案不起作用。）

我正在尝试设置d3动画的初始平移/缩放。根据上面的答案，我已经设置了我的SVG缩放与适当的翻译。

var svg = d3.select("#chart").append("svg")
    .on("touchmove mousemove", moved)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .call(zoom)
    .append ("g")
    .attr("transform","translate(400,200) scale(.4,.4)");

svg.call(zoom.transform, d3.zoomIdentity.translate(400, 200).scale(0.4))
.call(zoom);

图表按预期加载。但是，初始缩放操作会中断转换/缩放，返回缩放标识。我已经查看了文档和众多缩放示例，但无法确定这种d3 V4行为。

有谁知道发生了什么事？感觉像个臭虫。

Answer 1

以下似乎可以按预期工作

var zoom = d3.zoom().on("zoom", zoomed).scaleExtent([1 / 2, 8]);

function zoomed() {
  g.attr("transform", d3.event.transform); // updated for d3 v4
}

var svg = d3.select("#chart").append("svg")
    .on("touchmove mousemove", moved)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)


var g = svg.append("g");

svg.call(zoom).call(zoom.transform, d3.zoomIdentity.translate(400, 200).scale(0.4));

我仍然不确定问题是什么。回到原始代码，转换被正确地应用于g并且转换在没有解释的情况下擦除了它。

一个区别是我单独定义g，也许这是相关的。

D3初始缩放行为中断

1 个答案: