创建可使用CSV缩放的d3.js树状图

<script src="https://d3js.org/d3.v7.min.js"></script>

<svg id="tree-container" width="800" height="600"></svg>

d3.csv("data.csv").then(function(data) {
  // 数据加载成功后的处理逻辑
});

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

var tree = d3.tree()
  .size([height, width]);

var root = stratify(data)
  .sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); });

tree(root);

var svg = d3.select("#tree-container");

svg.selectAll(".node")
  .data(root.descendants())
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", 4);

svg.selectAll(".link")
  .data(root.links())
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; }));

var zoom = d3.zoom()
  .scaleExtent([0.1, 10])
  .on("zoom", function() {
    svg.attr("transform", d3.event.transform);
  });

svg.call(zoom);