D3JsDay04一同来见识 D3起手式—用D3写Helloworld
如何开始D3js
方法一 使用CDN
请google搜寻D3Js到D3Js的官方网站。
滑鼠滚轮到下方处
复制<script src="https://d3js.org/d3.v7.min.js"></script>
D3Js官方网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
</body>
</html>
把它复制贴到你的HTML页面就可以了
方法二 去官方网站下载压缩档
另外也可以在下方d3-7.0.1.tgz下载
解压缩之後会看到如下图
到dist的资料夹
把d3.js或者d3.min.js择一复制到你的专案资料夹底下就可以了
方法三 npm install d3
有用npm(node套件包管理工具)的人也可以使用npm install d3就会自动下载d3的资源包了。
检测是否有安装成功
使用开发者人员工具的console栏位键入d3.version
第一个d3
有用过jQuery的人起手式大概很熟悉的是$字号做开头，d3是类似的方式，使用d3来做开头後续使用方法链(method chain)的方式来实作每个步骤。
先直接看以下程序码
<script>
d3.select("body").append("div");
</script>
可以看到先选择了body这个tag，然後在里面插入div，於是打开开发者人员工具
在底下插入了一个div
这边语法讲解select()是选到第一个出现的元素
然後append()是插入一个元素，换句话说如果我们选择的元素有两个一样，只会选到第一个元素参见以下程序码
<div class="hello">
</div>
<div class="hello">
</div>
<script>
d3.select(".hello").append("div");
</script>
这个时候打开开发者人员工具会发现只有第一个class名为hello的底下有插入div这个元素
因此如果想要选取多个元素要改用selectAll()来选取多个元素
程序码变成以下
d3.selectAll(".hello").append("div");
当打开开发者人员工具就可以发现成功插入两个div元素了。
接下来我们要在新增的div底下插入文字
d3.select("body").append("div").text("Helo world");
画面就会出现如下面
以上介绍如何安装D3和撰写一个Hello World下一篇将会使用D3来画出一些简单的图表
参考API文件说明
API文件参考select()
API文件参考append()
API文件参考selectAll()
API文件参考text()
<<: Day04 - [丰收款] 金流API的起手式，每次沟通都机密
Day 28：IRQ (Part 2) - 中断突进！简单的 IRQ 程序
接下来的实验中，会写一个把 GPIO 当作是中断的来源的程序。这个 GPIO 由 Arduino 发...
Day 30 没credit也要把隐私规划做好
系统软件开发出身，後来转为SA、PM到产品服务架构师，後来专心研究隐私服务相关的规划，如同Day1开...
[Day06] TS：整合前几天所学，来写个 Generic Functions 吧！
这几天的内容中，我们已经学到了几个重点： 泛型（generics）的使用 使用 extends 限制...
[Day 30] -『 完赛心得』
今年IT邦自我挑战连续发文30天的最後一天， 回首思考当时的目的：想养成撰写技术文章的习惯，好好享受...
【资料结构】串链的表示法
串链的表示法 基本介绍 1.矩阵表示法: 若G(V,E)是含n个顶点的图，表示图G的矩阵为mat[n...