d3.js网络图放大

Question

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

这是我的简单图表， 在此处输入链接描述

我很想实现缩放功能，请使用此处描述的行为在此处输入链接描述 。 但是我无法使其正常工作，也许您会发现问题所在。

谢谢你的时间。

整个放大功能似乎可以通过以下分配和功能来处理：

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属性应用于element。

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

这是小提琴