先奉上有问题的代码
//在页面中添加svg 支持拖拽和缩放
var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000)
.call(d3.zoom().scaleExtent([1, 3]).on("zoom",
function redraw(event: any) {
svg.attr("transform", event.transform);
}
)).append("g").attr("transform", "translate(" + 350 + "," + 20 + ")")
解决方案 :在后面添加 .append(“g”),缩放的时候重新绘制
var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000)
.call(d3.zoom().scaleExtent([1, 3]).on("zoom",
function redraw(event: any) {
svg.attr("transform", event.transform);
}
)).append("g").attr("transform", "translate(" + 350 + "," + 20 + ")").append("g");
在老版本中是通过zomm.translate([350,20])解决上述问题的
D3实现组织型tree结构的完整代码 https://blog.csdn.net/qq_44621394/article/details/119392957
包含拖拽、缩放、平移、折叠、异步加载节点自定义渲染等功能