d3.js网络图缩放

Question

我可能有一个相对简单的问题。

这是我的简单图enter link description here

我希望使用此处描述的行为来实现放大和缩小功能 enter link description here。但我不能让它发挥作用，也许你会发现问题。

感谢您的时间。

整个放大功能似乎是通过这个分配和功能来处理的：

svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom));

function zoom() {
svg.clearRect(0, 0, width, height);  
}

Answer 1

您尝试进行缩放的代码用于画布。您可以使用transform属性来放大svg。 您可以将整个图形放在（组）元素中，并将transform属性应用于元素。

svg = d3.select("body")
         .append("svg")
         .attr("width", width)
         .attr("height", height)
         .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom))
         .append("g");

function zoom() {
    svg.attr("transform","translate("+ d3.event.translate+") scale("+d3.event.scale+")");  
}

以下是fiddle