D3 二维图表的绘制系列（三十三）可缩放的矩形树图

最新推荐文章于 2025-04-18 18:12:43 发布

PAT-python-zjw

最新推荐文章于 2025-04-18 18:12:43 发布

阅读量3.6k

点赞数

分类专栏： D3.js 二维图表系列

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

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

版权

上一篇：可缩放的封闭图

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

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

1 图表效果

在这里插入图片描述

2 数据

{
   
    "name": "grandfather",
    "children": [
        {
   
            "name": "father",
            "children": [
                {
   
                    "name": "son",
                    "children": [
                        {
   "name": "grandson1", "house": 2},
                        {
   "name": "grandson2", "house": 3},
                        {
   "name": "grandson3", "house": 4}

                    ]
                }
            ]
        },
        {
   
            "name": "mother1",
            "children": [
                {
   
                    "name": "daughter1",
                    "children": [
                        {
   "name": "granddaughter1", "house": 4},
                        {
   "name": "granddaughter2", "house": 2}
                    ]
                },
                {
   
                    "name": "daughter2",
                    "children": [
                        {
   "name": "granddaughter3", "house": 4}
                    ]
                }
            ]
        },
        {
   
            "name": "mother2",
            "children": [
                {
   
                    "name": "son1",
                    "children": [
                        {
   "name": "grandson4", "house": 6},
                        {
   "name": "granddaughter4", "house": 1}
                    ]
                },
                {
   
                    
                    "name": "son2",
                    "children":

最低0.47元/天解锁文章