d3.js绘制出来的树图 动态加载它的子节点并且它的子节点可以无线延展 它点击子节点延展出去的内容 看不到当前画布只能通过拖动来看 可拖动看到的内容也需要下载为png保存出来

要实现动态加载子节点，可以使用d3.js的数据绑定和更新方法。具体步骤如下：

1. 创建一个树图布局对象，可以使用d3.tree()方法。

2. 定义树图节点的层级结构和样式，可以使用d3.hierarchy()方法和selection对象的enter()和append()方法。

3. 给节点添加鼠标事件，比如点击事件，当点击节点时，加载它的子节点并更新树图。可以使用selection对象的on()方法和update()方法。

4. 当子节点加载完成后，重新绑定数据并更新树图。可以使用selection对象的data()和update()方法。

5. 实现拖动功能，可以使用d3.drag()方法。

6. 实现保存为png功能，可以使用html2canvas库将当前画布转换为图片并下载保存。

下面是一个简单的示例代码：

// 创建树图布局对象
var tree = d3.tree()
  .size([width, height]);

// 加载根节点数据并绘制树图
d3.json("data.json", function(data) {
  var root = d3.hierarchy(data);
  var nodes = tree(root);

  var node = svg.selectAll(".node")
    .data(nodes.descendants())
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  
  node.append("circle")
    .attr("r", 4)
    .on("click", function(d) {
      // 加载子节点数据
      d3.json("subdata.json", function(subdata) {
        var subnodes = tree(d3.hierarchy(subdata));
        // 更新树图
        node.data(nodes.descendants().concat(subnodes.descendants()))
          .enter()
          .append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
          .append("circle")
          .attr("r", 4);
      });
    });

  // 更新树图
  node.data(nodes.descendants())
    .enter()
    .append("circle")
    .attr("r", 4);
});

// 实现拖动功能
var drag = d3.drag()
  .on("drag", function(d) {
    d.x += d3.event.dx;
    d.y += d3.event.dy;
    d3.select(this).attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  });
svg.call(drag);

// 实现保存为png功能
d3.select("#save-btn").on("click", function() {
  html2canvas(document.querySelector("#tree-svg")).then(function(canvas) {
    var link = document.createElement("a");
    link.download = "tree.png";
    link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    link.click();
  });
});