「数据可视化 D3系列」入门第十二章：树状图详解与实践

八了个戒

于 2025-04-22 16:30:48 发布

阅读量1k

点赞数 21

分类专栏：数据可视化 D3系列文章标签：数据可视化 canvas javascript d3 前端

本文链接：https://blog.csdn.net/XH_jing/article/details/147423048

版权

数据可视化 D3系列专栏收录该内容

14 篇文章

订阅专栏

树状图深度解析与实现

一、核心API解析
二、完整实现解析
三、高级技巧与优化
四、常见问题解决
小结
下章预告：地图可视化

树状图是一种常见的层次结构可视化方式，它能够清晰地展示数据之间的父子关系。本文将详细介绍如何使用D3.js创建树状图，并解析相关核心API的使用方法。

一、核心API解析

1. d3.hierarchy

d3.hierarchy 是构建树状图的基础，它从给定的层次结构数据构造一个根节点，并为各个节点指定深度等属性：

var hierarchyData = d3.hierarchy(data)
    .sum(function (d,i) {
        return d.value;
    });

调用后，每个节点会被附加以下属性：

node.data - 关联的原始数据
node.depth - 当前节点的深度，根节点为0
node.height - 当前节点的高度，叶节点为0
node.parent - 当前节点的父节点
node.children - 当前节点的子节点
node.value - 当前节点及后代节点的总计值

2. d3.tree

d3.tree 创建一个新的整齐(同深度节点对齐)的树布局生成器：

var tree = d3.tree()
    .size([width, height])
    .separation(function(a,b) {
        return (a.parent==b.parent?1:2)/a.depth;
    });

关键配置方法：

tree.size([width, height]) - 设置布局尺寸
tree.separation() - 设置相邻节点间距函数

3. 节点操作方法

node.descendants() - 返回从当前节点开始的所有后代节点数组
node.links() - 返回当前节点所在子树的所有边(连接线)

二、完整实现解析

👇 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js 树状图实现</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .node circle {
            fill: #4a8bc9;
            stroke: #2c6cb0;
            stroke-width: 2px;
        }
        .node text {
            font: 12px sans-serif;
            fill: #333;
        }
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }
        .node:hover circle {
            fill: #ff7f0e;
        }
        .node:hover text {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <svg width="1000" height="600"></svg>

    <script>
        // 层次结构数据
        const data = {
            name: "中国",
            children: [
                {
                    name: "浙江",
                    children: [
                        {name: "杭州", value: 100},
                        {name: "宁波", value: 100},
                        {name: "温州", value: 100},
                        {name: "绍兴", value: 100}
                    ]
                },
                {
                    name: "广西",
                    children: [
                        {
                            name: "桂林",
                            children: [
                                {name: "秀峰区", value: 100},
                                {name: "叠彩区", value: 100},
                                {name: "象山区", value: 100},
                                {name: "七星区", value: 100}
                            ]
                        },
                        {name: "南宁", value: 100},
                        {name: "柳州", value: 100},
                        {name: "防城港", value: 100}
                    ]
                },
                {
                    name: "黑龙江",
                    children: [
                        {name: "哈尔滨", value: 100},
                        {name: "齐齐哈尔", value: 100},
                        {name: "牡丹江", value: 100},
                        {name: "大庆", value: 100}
                    ]
                },
                {
                    name: "新疆",
                    children: [
                        {name: "乌鲁木齐", value: 100},
                        {name: "克拉玛依", value: 100},
                        {name: "吐鲁番", value: 100},
                        {name: "哈密", value: 100}
                    ]
                }
            ]
        };

        // 设置SVG和边距
        const margin = {top: 60, right: 120, bottom: 60, left: 60};
        const width = 1000 - margin.left - margin.right;
        const height = 600 - margin.top - margin.bottom;

        // 创建SVG容器
        const svg = d3.select("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);

        // 创建层级布局
        const root = d3.hierarchy(data);
        root.sum(d => d.value || 0); // 计算每个节点的值

        // 创建树布局
        const treeLayout = d3.tree()
            .size([height, width - 200]) // 交换宽高以创建水平树
            .separation((a, b) => (a.parent === b.parent ? 1 : 1.5) / a.depth);

        // 应用布局到数据
        treeLayout(root);

        // 创建连接线生成器
        const linkGenerator = d3.linkHorizontal()
            .x(d => d.y)
            .y(d => d.x);

        // 绘制连接线
        svg.append("g")
            .selectAll(".link")
            .data(root.links())
            .join("path")
            .attr("class", "link")
            .attr("d", linkGenerator);

        // 创建节点组
        const node = svg.append("g")
            .selectAll(".node")
            .data(root.descendants())
            .join("g")
            .attr("class", "node")
            .attr("transform", d => `translate(${d.y},${d.x})`);

        // 添加圆形节点
        node.append("circle")
            .attr("r", 8)
            .on("mouseover", function() {
                d3.select(this).attr("r", 10);
            })
            .on("mouseout", function() {
                d3.select(this).attr("r", 8);
            });

        // 添加文本标签
        node.append("text")
            .attr("dy", "0.31em")
            .attr("x", d => d.children ? -15 : 15)
            .attr("text-anchor", d => d.children ? "end" : "start")
            .text(d => d.data.name)
            .clone(true).lower()
            .attr("stroke", "white")
            .attr("stroke-width", 3); // 添加白色描边使文字更清晰

        // 添加简单的缩放功能
        svg.call(d3.zoom()
            .scaleExtent([0.5, 2])
            .on("zoom", (event) => {
                svg.attr("transform", event.transform);
            }));
    </script>
</body>
</html>