D3 - 当树加载时，使链接与节点一起流动

以下是一个使用D3.js的示例代码，可以在树加载时使链接与节点一起流动：

// 创建一个包含树的数据
var treeData = [
  {
    name: "节点1",
    children: [
      {
        name: "节点1.1"
      },
      {
        name: "节点1.2"
      }
    ]
  },
  {
    name: "节点2"
  }
];

// 设置画布的宽度和高度
var width = 500;
var height = 500;

// 创建一个树布局
var tree = d3.layout.tree()
  .size([height, width - 100]);

// 创建一个对角线生成器，用于绘制链接路径
var diagonal = d3.svg.diagonal()
  .projection(function(d) {
    return [d.y, d.x];
  });

// 在body中创建一个svg元素作为画布
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(50,0)");

// 为树布局设置数据
var nodes = tree.nodes(treeData[0]);
var links = tree.links(nodes);

// 创建节点和链接的组元素
var node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + d.y + "," + d.x + ")";
  });

// 绘制节点圆圈
node.append("circle")
  .attr("r", 10)
  .style("fill", "steelblue");

// 绘制节点文本
node.append("text")
  .attr("dx", function(d) {
    return d.children ? -13 : 13;
  })
  .attr("dy", 4)
  .style("text-anchor", function(d) {
    return d.children ? "end" : "start";
  })
  .text(function(d) {
    return d.name;
  });

// 绘制链接路径
svg.selectAll(".link")
  .data(links)
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", diagonal);

// 添加过渡效果，使链接与节点一起流动
svg.selectAll(".link")
  .transition()
  .duration(1000)
  .attr("d", diagonal);

上述代码创建了一个包含两个节点的树，并使用D3.js绘制了节点和链接。最后，通过添加过渡效果，使链接与节点一起流动。你可以根据自己的需求修改节点和链接的样式以及过渡效果的持续时间。