D3 二维图表的绘制系列（一）介绍

PAT-python-zjw PAT-python-zjw 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 6.1w累计阅读 6.1w+平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
VIP免费 原创 最新推荐文章于 2026-03-15 00:07:57 发布 6.1w 阅读 AI 写同款· GEO 优化 ›
手把手教你做出数据可视化项目（六）动态3D柱状图及其自动旋转 数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图： 此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！ 使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。 文章目录动态三维柱状图三维柱状图数据存储柱状图配置tooltip配置xAxis3D配置yAxis3D配置zAxi. 阅读详情

1 介绍

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术,让你可以借助于现代浏览器的强大功能自由的对数据进行可视化

学习了d3一个多月，通过绘制一些简单的二维图表，总算入门了d3。强烈推荐《D3数据可视化实战手册》，讲的很清晰，我的部分图表demo也是模仿它写的。

每张图表在绘制之前，首先需要在页面上创建svg对象作为画布，并预留一定的margin，因此为了方便，减少代码的冗余，我定义了一个chart对象， 该对象具有一些内置的属性和方法，不仅帮助我们在绘图前快速地初始化画布，而且还能快速的设置图表的width，height和margin等属性， 运用裁剪clip保证元素不超出画布等。

源码请狠狠点击这里(帮忙点个star啦)

初始化后的画布结构如图， 之后的大部分图表主体部分的绘制范围都局限于body中
在这里插入图片描述

2 demo的代码结构

大部分每张图表都具有如下4个文件，其中data.csv用于

最低0.47元/天 解锁文章
标签
#d3.js #可视化
MyBatis-Flex分页查询实战：为什么你的_COUNT方法总是报错？ 本文深入解析MyBatis-Flex分页查询中常见的_COUNT方法报错问题，揭示其背后的设计机制与实现原理。通过源码分析、错误场景剖析和最佳实践示例，帮助开发者正确使用MyBatis-Flex分页功能，提升查询效率与代码质量。 阅读详情

相关推荐

D3 二维图表的绘制系列（十五）雷达图

上一篇： 气泡图 https://blog.csdn.net/zjw_python/article/details/98480632 下一篇： 矩形树状图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/articl...

zjw_python的博客 5368

D3 二维图表的绘制系列（二十）河流图

上一篇： 封闭图 https://blog.csdn.net/zjw_python/article/details/98492510 下一篇： 仪表盘图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article...

zjw_python的博客 5869

D3 二维图表的绘制系列（二十二）桑基图sankey

上一篇： 仪表盘图 https://blog.csdn.net/zjw_python/article/details/98492510 下一篇： 旭日图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article...

zjw_python的博客 6101

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

上一篇： 雷达图 https://blog.csdn.net/zjw_python/article/details/98480632 下一篇： 树图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article/d...

zjw_python的博客 5977

D3 二维图表的绘制系列（七）堆叠面积图

上一篇： 基础折线图 https://blog.csdn.net/zjw_python/article/details/98210977 下一篇： 曲线图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/articl...

zjw_python的博客 6066

D3 二维图表的绘制系列（二）基础柱状图

代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article/details/98182540 本图完整的源码地址： https://github.com/zjw666/D3_demo/tree/master/src/barChart/basicBarChart 1 图表效果 2 数据 date,money Mon,120 T...

zjw_python的博客 3501

D3 二维图表的绘制系列（二十七）日历热力图

上一篇： 盒须图 https://blog.csdn.net/zjw_python/article/details/99581418 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article/details/98182540 本图完整的源码地址： https://github.com/zjw666/D3_demo/tree/...

zjw_python的博客 5703

D3 二维图表的绘制系列（二十三）旭日图

上一篇： 桑基图 https://blog.csdn.net/zjw_python/article/details/98492510 下一篇： 力导向图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article...

zjw_python的博客 3620

D3 二维图表的绘制系列（十四）气泡图

上一篇： 多符号散点图 https://blog.csdn.net/zjw_python/article/details/98480632 下一篇： 雷达图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/artic...

zjw_python的博客 3658

D3 二维图表的绘制系列（十一）南丁格尔图

上一篇： 环状饼图 https://blog.csdn.net/zjw_python/article/details/98480632 下一篇： 基础散点图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/artic...

zjw_python的博客 4292

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

上一篇： 关系图-弦图 代码结构和初始化画布的Chart对象介绍，请先看 这里 本图完整的源码地址： 这里 1 图表效果 2 数据 { "name": "letter", "children": [ { "name": "a", "children": [ { ...

zjw_python的博客 6222

D3 二维图表的绘制系列（十）环状饼图

上一篇： 基础饼图 https://blog.csdn.net/zjw_python/article/details/98214359 下一篇： 南丁格尔图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/artic...

zjw_python的博客 3392

D3 二维图表的绘制系列（二十六）盒须图

上一篇： 中国地图 https://blog.csdn.net/zjw_python/article/details/98847312 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article/details/98182540 本图完整的源码地址： https://github.com/zjw666/D3_demo/tree...

zjw_python的博客 2957

D3 二维图表的绘制系列（三十）平行坐标系折线图

上一篇： 径向树图 代码结构和初始化画布的Chart对象介绍，请先看 这里 本图完整的源码地址： 这里 1 图表效果 2 数据 name,math,chinese,english,chemistry 小明,30,60,57,49 小红,50,95,65,65 小张,66,70,40,88 3 关键代码 导入数据 d3.csv('./data.csv', function(d){ ret...

zjw_python的博客 5917

前端可视化入门与实战:D3 高级图表实战：柱状图、折线图

最后，我们总结下这一节的关键知识点。D3 基于 SVG 的数据驱动视图的库，通过链式调用、封装比例尺、数学方法、数据状态的管理等，我们可以轻松绘制复杂的图表。我们的关注点只在数据，不用深入数据背后的调用，修改数据意味着视图会被更新。定义绘图区域 -> scaleBand 用于离散数据，用在 x 轴的比例尺；在 y 轴我们用scaleLinear，生成比例尺 -> 生成坐标轴 -> 通过 rect 生成柱体。

斌擎科技 2571

禅道二次开发（一）：从零搭建本地开发与调试环境

本文详细介绍了禅道二次开发的第一步：从零搭建本地开发与调试环境。通过部署官方一键安装包、配置端口与防火墙、连接数据库、设置Samba文件共享，并最终在VSCode中配置PHP智能感知与Xdebug调试，手把手教你建立一个隔离、高效的专属开发工作台，为后续的代码修改与功能扩展奠定坚实基础。

weixin_29003437的博客 323

图像去噪实战：Noise2Noise与Noise2Void在医学影像中的应用（附代码）

本文深入探讨了Noise2Noise与Noise2Void在医学影像去噪中的革命性应用，通过自监督学习技术有效解决临床数据配对难题。文章提供详细的代码实现和临床部署方案，展示如何提升低剂量CT、MRI等影像的诊断质量，特别适用于辐射敏感场景和急诊快速处理。

weixin_29092579的博客 241

手把手教你配置MCAL中的CAN模块：从基础参数到实战避坑指南

本文提供了一份详尽的MCAL CAN模块配置指南，涵盖从基础参数设置到实战避坑的全过程。文章深入解析了CAN控制器核心参数、硬件对象配置、数据流处理及常见问题排查，并结合源码分析，帮助嵌入式开发者构建稳定高效的CAN通信链路，是汽车电子领域通信开发的实用参考。

weixin_29165465的博客 336

Redis中什么是Big Key（大key）问题？如何解决Big Key问题？

通俗易懂的讲，Big Key就是某个key对应的value很大，占用的redis空间很大，本质上是大value问题。key往往是程序可以自行设置的，value往往不受程序控制，因此可能导致value很大。redis中这些Big Key对应的value值很大，在序列化/反序列化过程中花费的时间很大，因此当我们操作Big Key时，通常比较耗时，这就可能导致redis发生阻塞，从而降低redis性能。用几个实际的例子对大Key的特征进行描述：● 一个String类型的Key，它的值为5MB（数据过大）； ● 一

weixiaohuai的博客 3万+

计算机网络简答题

协议定义了在两个或多个通信实体之间交换的报文格式和顺序，以及发送接收报文以及其他事件需要采取的操作。为。

m0_61636632的博客 1699

RTCA DO-160G标准详解：航空电子设备的全面环境适应性测试指南

第二章的主要目的是提供标准中使用的术语和定义。了解这些术语对于准确理解标准的要求至关重要，特别是在技术实施过程中。RTCA DO-160G 涉及多个学科的知识，包括航空、电子、电磁学和机械工程，因此需要确保使用的术语在所有学科中具有一致的定义。为了确保测试人员和工程师在执行测试时对所有条件和要求的理解一致，RTCA DO-160G 标准中定义了大量术语。环境应力：指的是设备在操作过程中可能遇到的外部物理或化学条件，包括温度、湿度、振动等。电磁干扰（EMI）

qq_41854911的博客 5276

AI预测彩票，使用chatgpt和lstm神经网络(文末附源码)

AI预测彩票，使用chatgpt和lstm神经网络(文末有彩蛋)

淘淘小窝 1万+

TRON 主网节点搭建-2024最新详细版文档

TRON主网节点搭建以前，大概说明一下本次使用的服务器配置，本次从搭建部署到节点完成同步的时间大约为36小时。

J_Lee 4057

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

文档：亲测可用解决vnc灰屏，黑屏，鼠标大黑叉情况

主要解决vnc-viewer灰屏，黑屏，鼠标大黑叉等现象，详细见文档。

efm32 入门.pdf

本PDF共计22页，介绍的是操作驱动API，下载与否自己斟酌。

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正
上一篇： taro 编译React-Native安卓端流程
下一篇： D3 二维图表的绘制系列（二）基础柱状图
点赞 8
评论 6
书签 书签 56
PAT-python-zjw
PAT-python-zjw
博客等级 码龄10年 381粉丝 408原创
+ 关注 专栏目录
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值