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

Question

我有a test site我正在 build 一个d3-based force-directed network graph来 self 自己的数据。

如果我选择了大约五个或六个基因，我图表中的节点开始绘制在 Canvas 之外。

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

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

Answer 1

D3 允许使用缩放并且实现起来相当容易。您只需要将图表包裹在我称之为“viewport”的“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 + ")");
}