d3.js网络图缩放

d3.js network diagram zoom

本文关键字：缩放 网络 js d3      更新时间：2023-09-26

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

这是我的简单图表在这里输入链接描述

我很想使用这里描述的行为来实现放大和缩小功能在此处输入链接描述。但我做不到，也许你会发现问题的。

谢谢你抽出时间。

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

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

您尝试缩放的代码用于画布。您可以使用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+")");  
}

这是小提琴

相关文章：