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

最新推荐文章于 2024-05-17 10:05:36 发布
最新推荐文章于 2024-05-17 10:05:36 发布
阅读量6w 收藏 53
点赞数 8
分类专栏： D3.js 二维图表系列 文章标签： d3.js 可视化
本文为博主原创文章，转载请务必附上文章网址，谢谢。
本文链接：https://blog.csdn.net/zjw_python/article/details/98182540
版权

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用于存储源数据，index.css用于设置图表的css样式，index.html则是图表所在的页面，而index.js则是绘制图表的关键代码
在这里插入图片描述
index.html示例
在这里插入图片描述
index.css示例
在这里插入图片描述
data.csv示例
在这里插入图片描述

3 目录

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

D3 二维图表的绘制系列（三）多列柱状图

D3 二维图表的绘制系列（四）堆叠柱状图

D3 二维图表的绘制系列（五）横向柱状图

D3 二维图表的绘制系列（六）基础折线图

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

D3 二维图表的绘制系列（八）曲线图

D3 二维图表的绘制系列（九）基础饼图

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

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

D3 二维图表的绘制系列（十二）基础散点图

D3 二维图表的绘制系列（十三）多符号散点图

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

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

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

D3 二维图表的绘制系列（十七）树图

D3 二维图表的绘制系列（十八）漏斗图

D3 二维图表的绘制系列（十九）封闭图

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

D3 二维图表的绘制系列（二十一）仪表盘图

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

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

D3 二维图表的绘制系列（二十四）力导向图

D3 二维图表的绘制系列（二十五）中国地图

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

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

D3 二维图表的绘制系列（二十八）关系图-弦图

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

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

D3 二维图表的绘制系列（三十一）热力地图（heatMap.js）

D3 二维图表的绘制系列（三十二）可缩放的封闭图

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

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

在这里插入图片描述

PAT-python-zjw
关注
  • 8
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
D3图表示例-线型图表面型图表柱状图表
12-05
在D3.js中实现表面图可能需要更多的工作，包括创建多个二维平面来模拟三维效果，或者利用WebGL进行更高效的渲染。通常，我们会使用矩阵数据，并对每个值生成对应的矩形或者曲线，通过颜色深浅表示数值大小。 柱状图...
可视化图表 Highcharts、Echarts、D3、该用哪个
webxscan.com
10-31 300
除此之外，D3图表类型非常丰富，几乎可以满足所有开发需求，但代码相对于以上两个插件来说，会稍微难一点。以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入 或者 直接在html文件中引入SVG标签。Highcharts 兼容 IE6 及以上的所有主流浏览器，支持移动端缩放、手势操作。Echarts 兼容 IE6 及以上的所有主流浏览器，支持移动端的缩放和手势操作。D3 兼容IE9 及以上的所有主流浏览器，支持移动端的缩放和手势操作。
D3入门教程——做一个简单的图表
苏木的小站
08-18 3706
文章目录一、准备1.什么是画布1）SVG2）Canvas3）两者之前的区别二、开始1.添加画布2.绘制矩形三、完整代码 一、准备 1.什么是画布 HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。 1）SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事...
推荐：d3.chart - 可复用的D3.js图表框架
最新发布
gitblog_00025的博客
05-17 359
推荐：d3.chart - 可复用的D3.js图表框架 项目地址:https://gitcode.com/misoproject/d3.chart 1、项目介绍 d3.chart 是一个强大的框架，专为使用D3.js创建可重用的图表而设计。这个开源项目旨在简化数据可视化的过程，提供了一种结构化的途径来构建和维护复杂的D3图形。 2、项目技术分析 d3.chart基于UMD（通用模块定义），这意味着...
前端可视化入门与实战:D3 高级图表实战：柱状图、折线图
sybh的博客
02-18 1688
最后，我们总结下这一节的关键知识点。D3 基于 SVG 的数据驱动视图的库，通过链式调用、封装比例尺、数学方法、数据状态的管理等，我们可以轻松绘制复杂的图表。我们的关注点只在数据，不用深入数据背后的调用，修改数据意味着视图会被更新。定义绘图区域 -> scaleBand 用于离散数据，用在 x 轴的比例尺；在 y 轴我们用scaleLinear，生成比例尺 -> 生成坐标轴 -> 通过 rect 生成柱体。
D3基本图表绘制——折线图
m0_63150077的博客
02-02 4813
制作折线图分成4步走： 1.首先划定制图区域和范围——画一个边框 2.数据处理得到绘制折线图需要的数据——绘制折线需要一个数组整体 3.画出x，y轴和折线——y轴绘制需要注意 4.补充标签，调节位置
【D3.js开发入门：绘制图表】静态图表
popstarqq的博客
05-04 1434
什么是 D3.js？ D3.js是用于 HTML 和 SVG 实现的 JavaScript 可视化库。基于数据操作文档的 JavaScript 库。 说到D3不得不提到Echarts，Echarts和D3都是一个数据可视化的工具；而且都能实现一些相同的可视化图效果；那他们有什么不同呢？区别还是很大的 库层面的不同： 1 D3使用svg绘制图形，echarts使用canvas绘制图形 2 D3代码自由度高，相当灵活，但是学习成本也大；相反echarts封...
手把手教你做出数据可视化项目（六）动态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.
利用d3.js力导布局绘制资源拓扑图实例教程
10-17
首先，力导向图是d3.js中的一个重要特性，它用于在二维空间中展现节点和它们之间的关系。这种布局方式通过模拟物理系统中的力来自动排列节点，例如碰撞力、弹簧力、电荷力和定位力等，最终使图形达到稳定状态。在...
d3loom是d3插件用于创建织机图表布局适用于d3v4
08-10
**d3-loom：d3插件的织机图表...总的来说，d3-loom为D3.js的使用者提供了一种创新的图表类型，通过织机图表布局，可以更有效地展示和探索二维数据。结合D3.js的强大功能，开发者可以构建出富有洞察力的数据可视化应用。
d3Chart：这是一个图表项目，它将使用D3图表库和纯JavaScript来使用D3实现地图和条形图
02-16
d3Chart：这是一个图表项目，它将使用D3图表库和纯JavaScript来使用D3实现地图和条形图
html5 svg绘制饼状图表和线性图表动画效果
11-07
SVG是一种用于描绘二维图形的开放标准，它可以表示复杂的几何形状、路径、文本以及图像。SVG图形由一系列的元素构成，如`<circle>`、`<rect>`、`<path>`等，这些元素可以通过CSS进行样式控制，也可以通过JavaScript...
echarts 3D 柱状图
aibujin的博客
05-20 1万+
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画
甘特图简介
flyingdream123的专栏
09-26 272
甘特图简介
如何使用数据可视化库 D3 绘制折线统计图
太空编程
03-02 913
如题，如何使用数据可视化库 D3 绘制折线统计图？这篇文章将通过实例来讲解如何一步一步绘制下面这样一个折线统计图，并带有鼠标悬浮移动的文字显示效果。首先，我们来看下什么是 d3？移步官网：https://d3js.orgD3（或D3.js）是一个用于可视化数据的免费开源JavaScript库。其基于web标准的低级别方法在创作动态、数据驱动的图形方面提供了无与伦比的灵活性。 十多年来，D3为开创性...
unity 数据可视化 折线图 柱状图饼图等 读表自动可视化 二 绘制线设置
nt_xs_j的博客
08-17 736
初始状态为折线段 拐角明显，不光滑不圆滑 所以接下来说一下绘制的线的部分 调整线段 点开组件 找到series属性，点开进行配置 series 是绘制图形最关键最核心部分 你需要保证数据和这个series对应。这个属性是一个链表，你可以修改个数 默认的size为1 注意，如果你只有一条线的数据，那么运行之后也只会绘制一条线 TYPE 绘制类型 默认为line（当然，我们组件选用了linechart），你可以选用其他的 如下图，line和 bar两种...
Unity 生成可控可视化三维热力图
s4158303581的博客
06-19 7258
Unity 生成可控可视化三维热力图 1.生成相应的Mesh vertices = new Vector3[(xSize + 1) * (ySize + 1)]; for (int i = 0, y = 0; y <= ySize; y++) { for (int x = 0; x <= xSize; x++, i++) { vertices[i] = new Vector3(x,0,y); } } mesh.vertice
d3js绘制三维知识图谱
09-12
对于使用D3.js绘制三维知识图谱，可以通过以下步骤实现: 1. 数据准备: 首先，你需要准备好表示知识图谱的数据。这些数据可以是节点和边的集合，其中节点表示不同的知识点，边表示不同知识点之间的关系。 2. 建立场景: 使用D3.js创建一个包含三维元素的场景。你可以使用D3.js的三维模块（如d3-force-3d）来创建一个三维空间。 3. 添加节点和边: 在场景中添加节点和边。你可以使用D3.js的力导向图布局（force layout）来确定节点的位置，并使用线条来表示不同知识点之间的关系。 4. 设置交互: 为了增强用户体验，可以添加一些交互功能，比如节点的点击事件或鼠标悬停效果等。这样用户可以通过交互来探索知识图谱。 5. 样式美化: 对节点和边进行样式美化，使得知识图谱更加具有吸引力和可读性。你可以通过调整节点的大小、颜色、标签等来实现样式美化。 需要注意的是，绘制三维知识图谱可能需要一些高级的D3.js知识和技巧。你可以参考D3.js官方文档和示例代码，或者在社区中查找相关的教程和示例来帮助你实现这个目标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值