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

Question

我正在尝试在我的网络上设置初始缩放。它工作正常，但只要我尝试手动缩放图表，可视化就会跳转到它的自然缩放设置。看了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)")

Answer 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)")

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

D3 V5 : sync initial zoom with zoom event

javascript

synchronization

zooming

d3.js