D3笔记01——D3简介与安装
2024-09-06 01:10:47
1 D3简介
发布于2011年,全称Data-Driven Documents,直译为“数据驱动的文档”。
简单概括为一句话:D3是一个Javascript的函数库,是用来做数据可视化的。
文档指DOM,即文档对象模型(Document Object Model)。D3允许用户绑定任意数据到DOM,然后根据数据来操作文档,创建可交互式的图表。
文档指DOM,即文档对象模型(Document Object Model)。D3允许用户绑定任意数据到DOM,然后根据数据来操作文档,创建可交互式的图表。
由于D3是Javascript的函数库,故它也是一个js文件,也常称为D3.js。
2 D3安装
1)安装D3:
在<script>中引入D3文件即可
官方下载的D3文件名为,d3.zip,里面有三个文件,d3.js、d3.min.js(压缩版)以及LICENSE(版权许可证文件)
也可以通过网络引用d3文件:
在head标签中加入<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
可以发现http://d3js.org/d3.v5.min.js中使用的是v5版本,如果想使用v3版本,将v5改成v3即可。
2)搭建服务器(可选)
安装Apache
3)例子:
1⃣️页面中输出hello world
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var p = d3.select("body")
.selectAll("p")
.text("Hello World!");
p.style("color","red");
p.style("font-size","72px");
</script>
2⃣️页面中画一个圆
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 400;
var height = 400;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
svg.append("circle")
.attr("cx","50px")
.attr("cy","50px")
.attr("r","50px")
.attr("fill","red");
</script>
最新文章
- js平滑滚动到顶部,底部,指定地方
- java定时器的使用(Timer)
- Android广播BroadcastReceiver 二
- iOS- 利用AFNetworking(AFN) - 实现图片上传
- php大力力 [030节] php设计系统后台菜单
- df、du、fdisk:Linux磁盘管理三板斧的使用心得(转载)
- js调试-定位到函数所在文件位置
- .net对js和css、img剥离项目进行压缩优化、cdn加速
- Qt中各个widget前后位置的设定(在Qt中,所有问题都要一分为二,QWidget体系和QGraphicsWidget体系)
- EMVTag系列5《8E 持卡人验证方法(CVM)名单》
- dependency injection(2)
- pageHelper的使用步骤,省略sql语句中的limit
- WordConut
- Discrete Logging ZOJ - 1898 (模板题大小步算法)
- python 全栈开发,Day80(博客系统分析,博客主页展示)
- 「BZOJ 3645」小朋友与二叉树
- 使用PostgreSQL遇到的一个问题[column does not exist]字段不存在:
- sublime eslint 和 jshint的安装与使用
- css 播放器按钮实现
- 利用GDB对程序进行调试