D3 Tree Example

Shao Zelian, 14 Jun 2025

<div id="root"></div>

<script>
    const svg = d3
    .select("#root")
    .append("svg")
    .attr("width", 600)
    .attr("height", 380);
    const group = svg.append("g").attr("transform", "translate(50,50)");

        const color = d3.scaleOrdinal(d3.schemeCategory10);


    /**
    const data = {
        name: "中国",
        children: [
            { name: "北京" },
            { name: "陕西", children: [{ name: "宝鸡" }, { name: "西安" }] },
            { name: "上海" },
            { name: "浙江", children: [{ name: "杭州" }, { name: "温州" }] }
        ]
    };

    // 将数据进行层次化
    const dataset = d3.hierarchy(data);
    */ 


  let data = [
  {"name": "Eve",   "parent": ""},
  {"name": "Cain",  "parent": "Eve"},
  {"name": "Seth",  "parent": "Eve"},
  {"name": "Enos",  "parent": "Seth"},
  {"name": "Noam",  "parent": "Seth"},
  {"name": "Abel",  "parent": "Eve"},
  {"name": "Awan",  "parent": "Eve"},
  {"name": "Enoch", "parent": "Awan"},
  {"name": "Azura", "parent": "Eve"}
]

const dataset = d3.stratify()
      .id(function(d) { return d.name; })
      .parentId(function(d) { return d.parent; })
     (data)


    // 创建树布局
    const tree = d3.tree().size([300, 300]);

    // 所有节点
    const nodes = tree(dataset);

    group
    .selectAll(".link")
    .data(nodes.links())
    .join("path")
    .attr("class", "link")
    .attr(
        "d",
        d3
        .linkHorizontal()
        .x((d) => d.x)
        .y((d) => d.y)
    )
    .attr("fill", "none")
    .attr("stroke", "#ccc");

    const nodeGroups = group
    .selectAll(".node")
    .data(nodes.descendants())
    .join("g")
    .attr("calss", (d) => {
        return "node" + (d.children ? " node--internal" : " node--leaf");
    })
    .attr("transform", (d) => {
        return `translate(${d.x},${d.y})`;
    });

    nodeGroups
    .append("circle")
    .attr("r", 20)
    .attr("fill", (d, i) => color(i));

    nodeGroups
    .append("text")
    .attr("dy", ".33em")
    .attr("font-size", "12px")
    .attr("text-anchor", "middle")
    .attr("fill", "#fff")
    .text((d) => d.data.name);
</script>