在D3 js版本5中使用嵌套数据呈现文本

// 导入D3.js库
<script src="https://d3js.org/d3.v5.min.js"></script>

// 准备数据
var data = {
  "name": "A",
  "children": [
    {
      "name": "B",
      "children": [
        {"name": "C"},
        {"name": "D"}
      ]
    },
    {
      "name": "E",
      "children": [
        {"name": "F"},
        {"name": "G"}
      ]
    }
  ]
};

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建布局
var hierarchy = d3.hierarchy(data);
var treeLayout = d3.tree().size([400, 400]);
var treeData = treeLayout(hierarchy);

// 创建节点和链接
var nodes = svg.selectAll(".node")
  .data(treeData.descendants())
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", 5);

var links = svg.selectAll(".link")
  .data(treeData.links())
  .enter()
  .append("line")
  .attr("class", "link")
  .attr("x1", function(d) { return d.source.x; })
  .attr("y1", function(d) { return d.source.y; })
  .attr("x2", function(d) { return d.target.x; })
  .attr("y2", function(d) { return d.target.y; });

// 添加文本
var text = svg.selectAll(".text")
  .data(treeData.descendants())
  .enter()
  .append("text")
  .attr("class", "text")
  .attr("x", function(d) { return d.x + 10; })
  .attr("y", function(d) { return d.y + 5; })
  .text(function(d) { return d.data.name; });