更改 d3 SVG 画布的缩放级别？答案

【问题标题】：Changing zoom level of d3 SVG canvas?更改 d3 SVG 画布的缩放级别？
【发布时间】：2012-04-18 15:17:26
【问题描述】：

我有a test site，我正在根据自己的数据构建d3-based force-directed network graph。

如果我选择大约五六个基因，我的图表中的节点开始被绘制到画布之外。

我需要调用 d3 API 的哪些部分来控制缩放级别，以使节点不会从画布边缘消失？

如果可以的话，我肯定会感谢任何简要解释概念的代码 sn-ps，除非实现相当简单。谢谢你的建议。

【问题讨论】：

Is there a way to zoom into a graph layout done using D3?的可能重复

标签： javascript zooming scale d3.js

【解决方案1】：

D3 允许使用缩放，而且实现起来相当容易。您只需要将图形包装在我称之为“视口”的“g”元素中。然后您将分配给 svg 元素的缩放事件：

svg.call(d3.behavior.zoom().on("zoom", redraw))

以下函数：

function redraw() {
    d3.select("#viewport").attr("transform",
        "translate(" + d3.event.translate + ")"
        + " scale(" + d3.event.scale + ")");
}

【讨论】：

【解决方案2】：

var x, y, k;
            if (d && centered !== d) {
                var centroid = path.centroid(d);
                x = centroid[0];
                y = centroid[1];
                k = 4;
                centered = d;
            } else {
                x = w / 2;
                y = h / 2;
                k = 1;
                centered = null;
            }

在缩放功能中编写以下代码 svg.attr("变换", "translate(" + w / 2 + "," + h / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + " )");

对于绝对比例，您不能使用此代码这将有助于地图的缩放和平移

【讨论】：