D3.js 教程：用层级布局绘制树状图，代码奉上！

前端

2024-02-06 10:48:48

大开眼界：层级布局下的树状图魅力

树状图，以其独到的层次结构，展现出了数据世界中的组织与关联。利用 D3.js 的层级布局，我们可以轻松绘制出清晰明了的树状图，为数据分析与可视化注入新的活力。

层级布局的奥妙：

层级布局旨在根据层次数据结构，构建一个根节点，并按照层级关系，将数据点组织成树状结构。
层级布局中，节点的位置由其在树状结构中的层次和顺序决定。
通过巧妙运用层级布局，我们可以生成美观且易于理解的树状图。

绘制树状图的步骤：

导入必要的 D3.js 库：
- <script src="https://d3js.org/d3.v5.min.js"></script>
加载数据：
- 将层次数据结构加载到 JavaScript 对象中。
创建 SVG 画布：
- <svg width="width" height="height"></svg>
定义层级布局：
- let tree = d3.tree().size([width, height]);
转换数据：
- let root = d3.hierarchy(data);
计算节点位置：
- tree(root);
绘制树状图：
- d3.select("svg").selectAll("g").data(root.descendants()).enter().append("g")
- <circle cx="x" cy="y" r="radius"></circle>
- <path d="M x0,y0 L x1,y1"></path>

附上代码，助你一臂之力：

const width = 600, height = 500;
const tree = d3.tree().size([width, height]);
const svg = d3.select("svg");

d3.json("data.json").then(data => {
  let root = d3.hierarchy(data);
  tree(root);

  svg.selectAll("g").data(root.descendants()).enter()
    .append("g")
    .attr("transform", d => `translate(${d.x}, ${d.y})`)
    .append("circle")
    .attr("r", 5);

  svg.selectAll("path").data(root.links()).enter()
    .append("path")
    .attr("d", d3.linkHorizontal()
      .x(d => d.target.x)
      .y(d => d.target.y));
});