D3 二维图表的绘制系列（十六）矩形树状图

最新推荐文章于 2025-06-14 16:20:26 发布

PAT-python-zjw

最新推荐文章于 2025-06-14 16:20:26 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

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

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

本文链接：https://blog.youkuaiyun.com/zjw_python/article/details/98489369

上一篇：雷达图 https://blog.youkuaiyun.com/zjw_python/article/details/98486655

下一篇：树图 https://blog.youkuaiyun.com/zjw_python/article/details/98492510

代码结构和初始化画布的Chart对象介绍，请先看 https://blog.youkuaiyun.com/zjw_python/article/details/98182540

本图完整的源码地址： https://github.com/zjw666/D3_demo/tree/master/src/treeMapChart/basicTreeMap

1 图表效果

在这里插入图片描述

2 数据

树图类的数据不再是csv格式，而是json

{
   
   
    "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": "m