D3 二维图表的绘制系列（二十九）径向树图

最新推荐文章于 2025-04-22 16:30:48 发布

PAT-python-zjw

最新推荐文章于 2025-04-22 16:30:48 发布

阅读量6k

点赞数 1

分类专栏： D3.js 二维图表系列文章标签： D3

本文为博主原创文章，转载请务必附上文章网址，谢谢。

本文链接：https://blog.csdn.net/zjw_python/article/details/101280901

版权

上一篇：关系图-弦图

代码结构和初始化画布的Chart对象介绍，请先看这里

本图完整的源码地址：这里

1 图表效果

在这里插入图片描述

2 数据

{
   
    "name": "letter",
    "children": [
        {
   
            "name": "a",
            "children": [
                {
   
                    "name": "a1",
                    "children": [
                        {
   "name": "a11", "value": 2},
                        {
   "name": "a12", "value": 3},
                        {
   "name": "a13", "value": 4},
                        {
   "name": "a14", "value": 5},
                        {
   "name": "a15", "value": 5},
                        {
   "name": "a16", "value": 7}
                    ]
                }
            ]
        },
        {
   
            "name": "b",
            "children": [
                {
   
                    "name": "b1",
                    "children": [
                        {
   "name": "b11", "value": 4},
                        {
   "name": "b12", "value": 2},
                        {
   "name": "b13", "value": 4},
                        {
   "name": "b14", "value": 4},
                        {
   "name": "b15", "value": 4},
                        {
   "name": "b16", "value": 4}
                    ]
                },
                {
   
                    "name": "b2",
                    "children": [
                        {
   "name": "b21", "value": 4},
                        {
   "name": "b22", "value": 5},
                        {
   "name": "b23", "value": 4},
                        {
   "name": "b24", "value": 4}
                    ]
                }
            ]
        },
        {
   
            "name": "c",
            "children": [
                {
   
                    "name": "c1",
                    "children": [
                        {
   "name": "c11", "value": 6},
                        {
   "name": "c12", "value": 1}
                    ]
                },
                {
   

                    "name": "c2",
                    "children": [
                        {
   "name": "c21", "value": 2},
                        {
   "name": "c22"

最低0.47元/天解锁文章