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

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

上一篇: 雷达图 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
d3.js实现树形结构过渡展开、折叠 }整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享部分文档展示:文章篇幅有限,后面的内容就不一一展示了有需要的小伙伴,可以点下方卡片免费领取) 可以看到上面的图片则为新构建树形结构。 阅读详情

相关推荐

「数据可视化 D3系列」入门第十二章:树状图详解与实践

树状图是一种常见的层次结构可视化方式,它能够清晰地展示数据之间的父子关系。本文将详细介绍如何使用D3.js创建树状图,并解析相关核心API的使用方法。

XH_jing的博客 1709

Python数据可视化 Pyecharts 制作 Treemap 矩形树图

大家好,我是Mr数据杨。。这个世界如同三国演义中的战场,旗帜猎猎,硝烟弥漫,谋臣智将们用他们的智慧、勇气,犹如我们用Python的函数、模块,去解决面前的问题。一睹TreeMap:矩形树图的风采。想象一下,这就像是郭嘉用谋略将敌军布阵一览无遗,对数据进行全面细致的梳理,彰显数据之间的关系。在设置中更是可以深化对数据的理解,正如诸葛亮洞悉天下之势一样。有了面包屑导航样式,就如同三国的地图,在数据的世界里,可以自如地游走,无需担心迷失方向。

Mr数据杨 4万+

【d3】树图-各种效果集合(附效果图)

【d3】树图-各种效果集合(附效果图)

d3plus-hierarchy:在D3上构建的嵌套,层次结构和聚类图

d3plus-层次结构 在D3上构建的嵌套,层次结构和聚类图 正在安装 如果使用NPM,则npm install d3plus-hierarchy 。 否则,请下载。 您也可以将d3plus-hierarchy作为独立库或一部分进行。 支持ES模块,AMD,CommonJS和普通环境。 在香草中,将导出d3plus全局d3plus : < script src =" https://cdn.jsdelivr.net/npm/d3plus-hierarchy@1 " > </ script > < script > console . log ( d3plus ) ; </ script > 简单树形图 使用d3plus创建树形图非常简单。 给定一个看起来像这样的数据对象数组: var data = [ { parent : "Group 1" , id : "alpha"

【verilog语法详解:从入门到精通】

Verilog语法详解:从入门到精通 摘要:本文系统讲解Verilog硬件描述语言的核心语法与应用。Verilog作为数字电路设计标准,具有并行执行、硬件映射和层次化三大特点。文章从基础语法框架入手,详细介绍了模块定义、端口类型(input/output/inout)声明规范,以及线网型(wire)和寄存器型(reg)两种核心数据类型的区别与应用场景。重点讲解了组合逻辑(assign连续赋值)和时序逻辑(always块)的实现方式,包括阻塞赋值(=)与非阻塞赋值(<=)的关键差异。此外,还涵盖了参数(

m0_58476824的博客 4682

AR1020触摸控制器驱动开发:嵌入式I²C/SPI底层集成指南

电容式触摸控制器是现代嵌入式人机交互(HMI)系统的核心感知单元,其工作原理基于寄生电容变化检测与数字信号处理。Microchip AR1020 作为典型单芯片方案,内置硬件滤波、多点跟踪与手势识别引擎,通过I²C或SPI接口输出结构化事件数据,显著降低主控MCU负载。该类器件的技术价值在于平衡精度、功耗与实时性,广泛应用于工业HMI、医疗设备及车载终端等对可靠性要求严苛的场景。本文聚焦AR1020的寄存器映射、中断驱动模型、坐标解析机制及在STM32平台的HAL/LL级工程实现,涵盖硬件时序约束、固件配置

weixin_29323977的博客 600

【已解决】Claude应用地区限制问题:通过Slack注册与魔法节点切换实战指南

本文详细介绍了如何通过Slack注册和切换魔法节点解决Claude应用地区限制问题。从Slack账号注册、创建工作区技巧,到突破地区限制的关键步骤和成功后的配置使用,提供了全面的实战指南。特别强调了节点选择和网络环境对解决'App unavailable'错误的重要性,帮助用户顺利使用Claude AI助手。

weixin_29209801的博客 1760

Linux命令行入门:从零掌握服务器运维与Shell脚本基础

在信息化时代,操作系统是数字世界的基石,而终端命令行则是高效驾驭服务器的核心技能。无论是软件部署、服务监控还是故障排查,掌握基于Shell的指令操作都能大幅提升工程效率。从最基础的文件目录管理、文本处理,到权限控制、进程监控与网络调试,命令行提供了一套强大且可自动化的操作范式。尤其对于运维工程师和开发者而言,理解管道、重定向以及脚本化任务,意味着将重复劳动转化为可复用的自动化流程。本文从环境准备讲起,系统梳理常用Linux命令的实际场景与输出验证,并延伸至Shell脚本编写与定时任务,帮助初学者快速建立从操

weixin_30522983的博客 255

使用sklearn学习多项式回归(三)

1,什么是线性 我们无数次提到”线性“这个名词。在支持向量机中,我们也曾经提到最初的支持向量机只能够分割线性可分的数据,然后引入了”核函数“来帮助我们分类那些非线性可分的数据。我们也曾经说起过,比如说决策树,支持向量机是”非线性“模型。所有的这些概念,让我们对”线性“这个词非常熟悉,却又非常陌生——因为我们并不知道它的真实含义。接下来我们看看线性回归模型改进的核心之一:帮助线性回归解决非线性问题。 1.1,变量之间的线性关系 ”线性“这个词用于描述不同事物时有着不同的含义。我们最常使用的线性是指“变量

理科男同学 5100

深度强化学习训练结果曲线绘制教程

使用python语言,只调用matplotlib库,绘制训练过程中保存的强化学习训练曲线。模仿经典论文中的训练曲线,多次训练取平均,并绘制出阴影区域。

加斯顿工程师的博客 911

基于STM32L4XX、HAL库的AD7768BSTZ 模数转换器ADC驱动程序设计

/ 默认SPI配置。// 读取通道数据命令。// 通过SYNC_IN引脚触发转换(如果使用)// 处理数据...// 或者通过SPI命令。// 初始化AD7768。// SPI1引脚配置。

zhusl6688的博客 462

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

上一篇: D3 二维图表的绘制系列(十五)雷达图
下一篇: D3 二维图表的绘制系列(十七)树图
PAT-python-zjw
博客等级 码龄10年 381粉丝 408原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值