javascript - 更改 d3 SVG 画布的缩放级别？

Question

我有一个测试站点，我正在从我自己的数据中构建一个基于 d3 的力导向网络图。

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

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

如果有的话，我肯定会感谢任何简要解释这个概念的代码片段，除非实现相当简单。谢谢你的建议。

Answer 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 + ")");
}

Answer 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("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(" + k + ")translate(" + -x + " ," + -y + ")");

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