基于Typescript 和 D3 五版本绘制树状图 tree() 绘制树状图

最新推荐文章于 2025-03-20 01:38:51 发布

晴小篆

最新推荐文章于 2025-03-20 01:38:51 发布

阅读量3.6k

点赞数 2

分类专栏：前端文章标签： D3 TypeScipt 树状图 tree D3 5版本

本文链接：https://blog.youkuaiyun.com/qq_38355456/article/details/83584483

版权

这篇博客详细介绍了如何利用Typescript和D3库的第五版本来绘制树状图。针对D3 v5版本的相关API进行了讲解，并提供了具体的示例代码。读者可以参考作者在github上的项目进行学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本示例是基于Typescript 和 D3 五版本绘制树状图。

网上绝大多数都是D3 3版本，四版本也有一些示例，比较少，5版本几乎没有。这里是结合TS 和 D3 5版本的一个示例：

直接上代码：

/**
 * create by yanle
 * create time 2018-10-30 15:21
 */
import {hierarchy, tree} from "d3-hierarchy";
import {DefaultLinkObject, line, Link, linkHorizontal, linkVertical} from "d3-shape";
import {select, selectAll} from "d3-selection";

class Demo8 {
    private treeData: any = {
        "name": "中国",
        "children":
            [
                {
                    "name": "浙江",
                    "children":
                        [
                            {"name": "杭州"},
                            {"name": "宁波"},
                            {"name": "温州"},
                            {"name": "绍兴"}
                        ]
                },

                {
                    "name": "广西",
                    "children":
                        [
                            {
                                "name": "桂林",
                                "children":
                                    [

最低0.47元/天解锁文章