如何定位D3变换以适合视口SVG

Question

我正在d3中构建可视化，并使用d3.zoom（）对其进行缩放和平移。我想将我的可视化效果适合视口，并能够通过外部界面更改缩放和平移。我该怎么做？

我当前的代码如下-

   var svgMain = d3.select(selector).append("svg")
        .attr("width", dim.width)
        .attr("height", dim.height)
        .call(d3.zoom().on("zoom", function () {
            svg.attr("transform", d3.event.transform)
         }))
         .on("dblclick.zoom", null)

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

// Later in update()
        var node = svg.selectAll('g.node')
            .data(nodes, function(d) {return d.id });

这是当前的渲染方式以及我希望的样子-