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

最新推荐文章于 2024-05-17 10:05:36 发布
原创 最新推荐文章于 2024-05-17 10:05:36 发布 · 6.1w 阅读 · 56 ·
CC 4.0 BY-SA版权
本文为博主原创文章，转载请务必附上文章网址，谢谢。
文章标签：

#d3.js #可视化

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元/天 解锁文章
手把手教你做出数据可视化项目（六）动态3D柱状图及其自动旋转
diviner_s的博客
06-12 1万+
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图： 此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！ 使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。 文章目录动态三维柱状图三维柱状图数据存储柱状图配置tooltip配置xAxis3D配置yAxis3D配置zAxi.
数据分析入门之数据可视化(散点图、折线图、饼图、柱状图、直方图)
热门推荐
阿优乐扬的博客
01-11 1万+
文章目录1、散点图1.1、导入数据1.2、数据可视化1.3、设置参数1.4、自定义样式1.5、解决中文不能显示2、折线图2.1、导入数据2.2、日期类型转换2.3、数据可视化3、饼图3.1、导入数据3.2、分组统计数量3.2、饼图展示4、柱状图4.1、导入数据4.2、分组求和4.3、建立X轴的序列4.4、数据可视化4.5、三维柱状图4.6、堆叠柱状图5、直方图5.1、导入数据5.2、绘制直方图5....
Unity接入ChartAndGraph图表插件
加加油！
07-23 5382
Unity中接入ChartAndGrap图表插件
d3Chart:d3图表
05-16
我制作的图表效果 d3.js 图表的制作引入了d3.js的函数库 clone or download代码 点击右上角绿色图标 在浏览器中打开index.html 注意，由于存在异步的请求，需要使用本地服务器打开，而不是使用file:// 有两种工具推荐： http-server ## 全局安装http-server npm install -g http-server ## 查看所有命令 http-server --help ## 在项目根目录下执行 http-server . browserSync 浏览器同步工具： ## 全局安装browserSync npm install -g browser-sync ## 查看所有命令 browser-sync ## 在项目根目录下执行 browser-sync start --server --files ".index.html"
D3入门教程——做一个简单的图表
苏木的小站
08-18 3892
文章目录一、准备1.什么是画布1）SVG2）Canvas3）两者之前的区别二、开始1.添加画布2.绘制矩形三、完整代码 一、准备 1.什么是画布 HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。 1）SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事...
D3 二维图表的绘制系列（三十一）热力地图（heatMap.js）
zjw_python的博客
02-20 6674
上一篇： 平行坐标系折线图 代码结构和初始化画布的Chart对象介绍，请先看 这里 本图完整的源码地址： 这里 1 图表效果 2 数据 本文源码中提供了中国地图的GeoJson数据， 点击这里下载，如果想获取其他地区的数据，可参考这篇文章 3 关键代码 导入GeoJson格式的地图数据 d3.json('./china.json').then(function(data){ .... 一些简单...
D3 二维图表的绘制系列（七）堆叠面积图
zjw_python的博客
02-20 6029
上一篇： 基础折线图 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...
D3 二维图表的绘制系列（二十）河流图
zjw_python的博客
02-20 5812
上一篇： 封闭图 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...
D3 二维图表的绘制系列（二十一）仪表盘图
zjw_python的博客
02-20 2828
上一篇： 河流图 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/...
d3 charts
qw890704的专栏
05-20 1486
D3 Page Template .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } .dot { stroke: #0
d3Chart：这是一个图表项目，它将使用D3图表库和纯JavaScript来使用D3实现地图和条形图
02-16
d3Chart：这是一个图表项目，它将使用D3图表库和纯JavaScript来使用D3实现地图和条形图
d3-chart:一个简单的 JavaScript D3.js 图表
06-29
JavaScript - d3-dchart 一个简单的 JavaScript D3.js 图表。 安装 脚本 < script src =" /path/to/d3-chart.js " > </ script > 浏览器化 npm install --save d3-chart 成分 component install jprichardson/d3-chart 用法 暂时不要用，过几天就可以用了。 执照 （麻省理工学院许可证） 版权所有 2013, JP Richardson
D3图表示例-线型图表面型图表柱状图表
12-05
D3图表示例-线型图表面型图表柱状图表
d3-chart:一个新的 d3 图表
06-24
网络应用程序模板简单 带有 jQ​​uery 和 Bootstrap 的简单 Web 应用程序模板。 | Mizzou 工作坊 - 2014 年 10 月
数据图表-D3
Moke的博客
12-18 313
D3操作流程 d3的介绍 D3.js(Data-Driven Documents)是一个使用动态图形进行数据可视化的JavaScript程序库。 与W3C标准兼容，并且利用广泛实现的SVG、JavaScript和CSS标准 d3和echarts的区别 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，ECharts ...
前端可视化入门与实战:D3 高级图表实战：柱状图、折线图
斌擎科技
02-18 2356
最后，我们总结下这一节的关键知识点。D3 基于 SVG 的数据驱动视图的库，通过链式调用、封装比例尺、数学方法、数据状态的管理等，我们可以轻松绘制复杂的图表。我们的关注点只在数据，不用深入数据背后的调用，修改数据意味着视图会被更新。定义绘图区域 -> scaleBand 用于离散数据，用在 x 轴的比例尺；在 y 轴我们用scaleLinear，生成比例尺 -> 生成坐标轴 -> 通过 rect 生成柱体。
【d3】d3画图样式图例
你的博客
09-02 7689
以下d3的chart都是本人实践画过的，当然也花费了很多时间和精力，如有需要可以私信我要源码。 一 简单拟合 大体数据格式，后台计算拟合曲线返回formula，前端画图 二 box plot 计算出关键参数，画图 三 椭圆图 此图的画法，其实并不是直接给出的椭圆的关键参数画的。再后台计算椭圆数据时，采用的某个api返回的值是椭圆上的点，因此在前端直接显示的这些点，只要数量够，直观显示的就是椭圆形状。可以看出上图的椭圆中间曲线是空的 四 mosic plot ..
推荐：d3.chart - 可复用的D3.js图表框架
gitblog_00025的博客
05-17 568
推荐：d3.chart - 可复用的D3.js图表框架 1、项目介绍 d3.chart 是一个强大的框架，专为使用D3.js创建可重用的图表而设计。这个开源项目旨在简化数据可视化的过程，提供了一种结构化的途径来构建和维护复杂的D3图形。 2、项目技术分析 d3.chart基于UMD（通用模块定义），这意味着它可以无缝地集成到多种环境中，如Web浏览器（通过HTML <script> 标...
d3基本图形
aizou6838的博客
10-26 302
柱状图 散点图、气泡图 折线图 ...
二维图形绘制
最新发布
04-20
### 关于二维图形绘制的方法、库和工具 在计算机科学领域，二维图形绘制是一个广泛研究的主题。以下是几种常见的技术方法以及支持这些功能的库和工具。 #### 技术方法概述 1. **矢量绘图法** 矢量绘图是一种基于几何对象（如点、线、曲线）来表示图像的方式。这种方法的优点在于其分辨率无关性，即无论放大还是缩小都不会失真[^2]。 2. **光栅化渲染** 光栅化是指将矢量数据转换为像素的过程。这是大多数现代显示设备所采用的核心技术之一，在二维图形绘制中也占据重要地位[^3]。 3. **变换矩阵应用** 使用仿射变换可以实现平移、旋转、缩放等功能，这对于动态调整二维图形的位置和大小非常有用[^4]。 #### 常见库与框架介绍 1. **Qt Graphics View Framework** Qt 提供了一套强大的Graphics View框架用于处理复杂的场景管理及交互操作。它允许开发者轻松创建自定义控件并集成到应用程序界面之中[^5]。 2. **Matplotlib (Python)** Matplotlib 是 Python 中流行的绘图库，能够生成高质量的图表和图形输出。尽管主要面向数据分析可视化需求，但它同样适用于一般性的二维图形创作任务[^6]。 3. **OpenGL / WebGL** OpenGL 和它的Web版本WebGL提供了底层接口让程序员可以直接操控GPU硬件加速完成复杂三维甚至简单的二维图形呈现工作[^7]。 4. **SVG.js 或 D3.js (JavaScript)** 对于网页端的应用来说,SVG.js专注于简化可扩展矢量图形(SVG)的操作而D3.js则更侧重绑定数据至DOM元素从而驱动文档结构变化,两者都是优秀的前端解决方案[^8]. #### 示例代码展示 下面给出一段利用Pygame库实现在窗口内绘制矩形的例子： ```python import pygame pygame.init() screen = pygame.display.set_mode((400, 300)) done = False while not done: for event in pygame.event.get(): if event.type == pygame.QUIT: done = True screen.fill((0, 0, 0)) # 清屏设置背景颜色为黑色 pygame.draw.rect(screen,(255,0,0),pygame.Rect(30,30,60,60)) pygame.display.flip() ```
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值