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

关注

VIP免费原创最新推荐文章于 2026-06-13 10:54:35 发布 3.6k 阅读 AI 写同款· GEO 优化 ›

D3 二维图表的绘制系列（一）介绍 1 介绍 D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术,让你可以借助于现代浏览器的强大功能自由的对数据进行可视化学习了d3一个多月，通过绘制一些简单的二维图表，总算入门了d3。强烈推荐《D3数据可视化实战... 阅读详情

上一篇：可缩放的封闭图

代码结构和初始化画布的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": [
                        {
   
   "name"