D3 初始缩放行为中断答案

【问题标题】：D3 initial zoom behavior breaksD3 初始缩放行为中断
【发布时间】：2018-02-17 23:40:43
【问题描述】：

注意：（类似于这里的问题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 行为。

有人知道发生了什么吗？感觉是个bug。

【问题讨论】：

你能提供一个 Fiddle 更多的代码来帮助我修改吗？我在当前的项目中经历过类似的事情。这可能是由于您当前在使用.append(g) 时将变量svg 设置为组元素。实际上，您的初始缩放调用在 svg 元素上，而所有未来的缩放调用都在 g 元素上。相反，启动一个新变量（例如，var group = svg.append("g")...。但同样，小提琴会有所帮助！
好的，我会试着做一个小提琴。感谢您的解释，这是最有意义的。我会研究它。
好的，我一直在尝试制作小提琴，但它们崩溃了……我只是浏览了更多示例并复制和粘贴，直到一切正常。在下面回答。

标签： javascript d3.js svg

【解决方案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，可能是相关的。

【讨论】：

你的代码的最后一行现在在 svg 元素而不是 g 元素上调用缩放
有趣的是，首先，尽管事实上我的原始代码中的缩放比附加在链中更早，但 d3 将缩放解释为在 g? 上调用的。 (.call(zoom).append ("g"))。其次，我实际上想要缩放应用于g，而不是SVG 元素。新代码在zoomed() 函数中执行此操作。我想我不明白 d3！