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

Question

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

如果我选择大约五六个基因,我的图形中的节点开始被绘制在画布之外.

我需要调用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 + ")");
}