[数据与分析可视化] D3入门教程1-d3基础知识
d3.js入门教程1-d3基础知识
文章目录
d3.js是一个用于绘图的JavaScript 库。 它可以可视化展示任何类型的数据。 本文档展示了多个交互式示例，说明了d3.js的关键概念，从而生成了第一个基本散点图。
1 HTML介绍
1.1 什么是HTML？
HTML介绍：
- HTML代表超文本标记语言。基本上，它是任何网站背后的语言。Mozilla 或 Safari 等 Web 浏览器会读取此类文件并将其翻译到网页中
- 在HTML文件中，组成网页的元素被创建，并由标签描述。例如，级别1的标题由h1标签表示，带有标签的段落，由p标签表示图像img
- 如果没有 html 的基本知识，就不可能学会d3.js
<!DOCTYPE html>
<!-- 添加标题 -->
<h1>First html document</h1>
<!-- 添加一行文字 -->
<p>This is my first sentence</p>
<!-- 添加链接-->
<p>This is <a href="https://www.d3-graph-gallery.com">a link to the d3 graph gallery</a></p>
First html document
This is my first sentence
This is a link to the d3 graph gallery
将上面的代码复制并粘贴到本地文件中。称之为test.html，便构建一个简单的网页。
1.2 自定义文档样式CSS
CSS代表级联样式表，它允许将特定样式应用于使用html创建的元素。
<!DOCTYPE html>
<!-- 将特定样式应用于inGreen类的元素 -->
<style>
.inRed { color: red; }
.inFont { font-size: 20px}
</style>
<!-- 添加标题，并添加相应的类 -->
<h1 class="inFont">First html document</h1>
<!-- 添加一行文字 -->
<p class="inRed">This is my first sentence</p>
<!-- 添加链接 -->
<p>This is <a href="https://www.d3-graph-gallery.com">a link to the d3 graph gallery</a></p>
First html document
This is my first sentence
This is a link to the d3 graph gallery
1.3 构建svg图形
- svg代表可缩放矢量图形。它是一种矢量图像格式。基本上，它是一种允许使用代码构建形状的语言
- d3.js图表实际上是一组svg组合在一起的形状
- d3.js展示了不同形状的svg
<!DOCTYPE html>
<!-- 添加标题 -->
<h1>First html document</h1>
<!-- 添加一行文字 -->
<p>This is my first sentence</p>
<!-- 添加svg形状 -->
<svg>
<circle style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle>
</svg>
First html document
This is my first sentence
2 d3绘图入门
2.1 使用Javascript和d3.js修改元素
JavaScript是前端的三大核心技术之一。它实现了网页的交互性。d3.js是一个javascript库，对数据可视化特别有用。它允许创建、选择和修改元素。在下面的示例中， d3用于选择目标圆形并修改其stroke-width。虽然它还不是很令人印象深刻，但是我们将使用相同的过程来设置数百个圆的位置并得到散点图。
<h1>First html document</h1>
<!-- 添加标题 -->
<p>This is my first sentence</p>
<!-- 添加svg形状 -->
<svg>
<circle class="target" style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle>
</svg>
<!-- 加载d3 -->
<script src="https://d3js.org/d3.v4.js"></script>
<script>
d3
.select(".target") // 选择target类
.style("stroke-width", 8) // 修改svg图形轮廓
.style("opacity", 0.5) // 修改svg图形透明度
</script>
2.2 Console.log()
浏览器运行Html，css和Javascript并将结果显示为网页，如果出现问题，会在浏览器控制台中发出通知，你可以在右键单击页面打开->检查->console，打开控制台，或者直接按F1。比如在控制台中输入，console.log(“sometext”)，就可以打印sometext字符串。
2.3 坐标系
构建d3.js图表首先创建一个svg元素。这个元素有width和height两个参数来控制大小，以像素为单位。左上角的坐标为x=0和y=0，左下角的坐标x=0和y=height，右上角的坐标x=width和height=0，和常见的图片坐标表示一样。显示三个圆的代码如下：
<!-- 添加一个空的svg图片 -->
<svg id="dataviz_area" height=200 width=450></svg>
<!-- 加载d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var svg = d3.select("#dataviz_area")
// 添加圆，cx和cy为圆心坐标，r为半径
svg.append("circle")
.attr("cx", 2).attr("cy", 2).attr("r", 40).style("fill", "blue");
svg.append("circle")
.attr("cx", 120).attr("cy", 70).attr("r", 40).style("fill", "red");
svg.append("circle")
.attr("cx", 300).attr("cy", 100).attr("r", 40).style("fill", "green");
</script>
2.4 比例尺
如果想用百分比来表示svg中元素的位置，那么就需要用到比例尺，比例尺就是一个将像素值范围转换为位置百分比的函数。它被称为scale。如果我的数据是百分比并且我的svg区域是400px宽度。那么0%代表0px，100%代表400像素。50%代表200像素。比例尺有domain和range两个属性，range设置像素值范围，domain设置位置百分比。
<!-- 添加一个空的svg图片 -->
<svg id="viz_area" height=200 width=450></svg>
<!-- 加载d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script>
// 选择svg绘图区域
var svg = d3.select("#viz_area")
// 创建比例尺
// 将0到400像素映射到0%到100%
var x = d3.scaleLinear()
.domain([0, 100])
.range([0, 400]);
// 尝试console.log(x(25))以查看x函数的用途。
// 以百分比设置图片尺寸
svg.append("circle")
.attr("cx", x(10)).attr("cy", 100).attr("r", 40).style("fill", "blue");
svg.append("circle")
.attr("cx", x(50)).attr("cy", 100).attr("r", 40).style("fill", "red");
svg.append("circle")
.attr("cx", x(100)).attr("cy", 100).attr("r", 40).style("fill", "green");
</script>
2.5 添加轴
d3提供了一些自动绘制轴的功能。这些轴始终与比例尺scale对应。axisBottom()创建一个水平轴，底部带有刻度和标签。axisLeft()将用于Y 轴。
<!-- 添加一个空的svg图片 -->
<svg id="viz_area" height=200 width=450></svg>
<!-- 加载d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script>
// 选择svg绘图区域
var svg = d3.select("#viz_area")
// 创建比例尺
var x = d3.scaleLinear()
.domain([0, 100])
.range([0, 400]);
// 显示与此比例对应的轴
svg.call(d3.axisBottom(x));
// 以百分比设置图片尺寸
svg.append("circle")
.attr("cx", x(10)).attr("cy", 100).attr("r", 40).style("fill", "blue");
svg.append("circle")
.attr("cx", x(50)).attr("cy", 100).attr("r", 40).style("fill", "red");
svg.append("circle")
.attr("cx", x(100)).attr("cy", 100).attr("r", 40).style("fill", "green");
</script>
2.6 边距和偏移
轴位置经常需要调整，例如，X轴通常位于图表的底部。这归功于translation函数，应用.attr(“transform”, “translate(20,50)”)到一个元素，将其向右平移 20 像素，向底部平移 50 像素。
<!-- 添加一个空的svg图片 -->
<div id="Area"></div>
<!-- 加载d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script>
// 设置图形的尺寸和边距
var margin = { top: 10, right: 40, bottom: 30, left: 30 },
width = 450 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// 将svg对象附加到页面主体
var svg = d3.select("#Area")
.append("svg")
// 留下空白
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g") // 添加标尺
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 平移图像
// 创建x轴比例尺
var x = d3.scaleLinear()
.domain([0, 100])
.range([0, width]);
svg.append('g')
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// 创建y轴比例尺
var y = d3.scaleLinear()
.domain([0, 100])
.range([height, 0]);
svg.append('g')
.call(d3.axisLeft(y));
</script>
2.7 数据绑定
将数据绑定到svg元素是我们完成散点图所需的最后一步。在我看来，这也是最难理解的部分。它始终遵循相同的步骤：
- svg: 选择图表所在的 svg 区域
- .selectAll(“whatever”): 选择所有尚未创建的元素，我知道这很奇怪。
- .data(data): 指定要使用的数据。
- .enter(): 开始数据循环。以下代码将应用于data[0]，data[1]依此类推。
- .append(“circle”)：对于每次迭代，添加一个圆圈。
- .attr(“cx”, function(d){ return x(d.x) }): 给出圆的x位置。这里d将是data[0]，然后data[1]等等。
<!-- 添加一个空的svg图片 -->
<div id="scatter_area"></div>
<!-- 加载d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script>
// 设置图形的尺寸和边距
var margin = { top: 10, right: 40, bottom: 30, left: 30 },
width = 450 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// 将svg对象附加到页面主体
var svG = d3.select("#scatter_area")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// 创建数据
var data = [{ x: 10, y: 20 }, { x: 40, y: 90 }, { x: 80, y: 50 }]
// 创建x轴比例尺
var x = d3.scaleLinear()
.domain([0, 100])
.range([0, width]);
svG.append('g')
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// 创建y轴比例尺
var y = d3.scaleLinear()
.domain([0, 100])
.range([height, 0]);
svG.append('g')
.call(d3.axisLeft(y));
// 添加数据
svG.selectAll("whatever")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) { return x(d.x) })
.attr("cy", function (d) { return y(d.y) })
.attr("r", 7)
</script>
3 参考
本文来自博客园，作者：落痕的寒假，转载请注明原文链接：https://www.cnblogs.com/luohenyueji/p/16970189.html
