D3 V5：将初始缩放与缩放事件同步答案

【问题标题】：D3 V5 : sync initial zoom with zoom eventD3 V5：将初始缩放与缩放事件同步
【发布时间】：2020-08-22 08:30:57
【问题描述】：

我正在尝试在我的网络上设置初始缩放。它工作正常，但只要我尝试手动缩放图表，可视化就会跳转到它的自然缩放设置。阅读 Stack 上的答案和 d3 的官方文档，以下代码对我来说是正确的，但它并没有解决问题。

我做错了什么？非常感谢您的帮助！

const svg = d3.select('div#network')
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .call(d3.zoom().on("zoom", function () {
            svg.attr("transform", d3.event.transform)
        }),d3.zoomIdentity.scale(.2))
    .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`)
        .attr("transform","scale(.2)")

【问题讨论】：

标签： javascript d3.js synchronization zooming

【解决方案1】：

解决了！我几乎是对的！您需要进行第二次“调用”，而不是将此转换作为第一次的参数。

const svg = d3.select('div#reseau')
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .call(d3.zoom().on("zoom", function () {
            svg.attr("transform", d3.event.transform)
        }))
        .call(d3.zoom().transform,d3.zoomIdentity.scale(.2))
    .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`)
        .attr("transform","scale(.2)")

【讨论】：