Question

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

如果我选择大约五六个基因，我的图形中的节点就会开始在画布之外绘制。

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

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

Answer 1

D3允许使用缩放，并且它很容易实现。你只需要将你的图形包装在我称之为“viewport”的“g”元素中。然后你将分配到svg元素的zoom事件：

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 +“））“）;

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

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

2 个答案: