数据可视化 d3.js 学习笔记

最新推荐文章于 2023-09-12 15:53:35 发布
最新推荐文章于 2023-09-12 15:53:35 发布
阅读量272 收藏 1
点赞数
分类专栏： 数据可视化 文章标签： javascript 数据可视化 d3.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bananalone/article/details/106389073
版权

教程链接：data visualization with d3(freecodecamp.org)

D3.js

1. 思维导图

在这里插入图片描述

2. 基础

2.1 select

选择一个DOM元素，const anchor = d3.select("a");
用法同document.querySelector()

2.2 selectAll

选择一组DOM元素，用法同document.querySelectorAll()

2.3 append

在选择的元素里添加新的DOM元素，返回新元素

2.4 text

返回结点文本或者设置结点文本，参数是字符串或者回调函数

d3.select("ul")
  .append("li")
  .text("Very important item");

selection.text((d) => d);

2.5 data

将数据附加到选中的DOM元素

2.6 enter

为数据集中的每个数据创建一个新元素，当选中的DOM元素个数少于数据个数时，enter会创建缺少的元素

<body>
  <ul></ul>
  <script>
    const dataset = ["a", "b", "c"];
    d3.select("ul").selectAll("li")
      .data(dataset)
      .enter()
      .append("li")
      .text("New item");
  </script>
</body>

此处enter方法检查数据集并运行后面的代码三次，也就是对数组中的每个项运行一次

2.7 style

style方法能添加行内css样式，参数是逗号分隔的键值对或回调函数

selection.style("color","blue");

selection.style("property", (d, i) => {
  /* 
  * d is the data point value
  * i is the index of the data point in the array
  */
});

参数i可以省略

2.8 attr

attr方法给元素添加html属性，包括class，用法同style

selection.attr("class", "container");

selection.attr("property", (d, i) => {
  /* 
  * d is the data point value
  * i is the index of the data point in the array
  */
})

参数i可以省略

2.9 示例

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       .attr("fill", "navy");
  </script>
<body>

在这里插入图片描述

3. 进阶

3.1 labels

使用svg的text节点向图标中添加标签

3.2 hover effect

使用attr方法和css的:hover伪类实现悬停效果

3.3 tooltip

使用svg的title节点添加提示
SVG绘图中的每个窗口元素或图形元素都可以提供一个title描述性字符串，该描述只能是纯文本。如果当前的SVG文档片段在可视媒体中呈现为SVG，title元素不会呈现为绘图的一部分。然而，一些用户代理可能会，举个例子，把title显示为一个提示冒泡。

3.4 示例

<style>
	.bar:hover {
	fill: brown;
}
</style>
<body>
	<script>
		const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
		
		const w = 500;
		const h = 200;
		
		const svg = d3.select("body")
					  .append("svg")
					  .attr("width", w)
					  .attr("height", h);
		
		svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x", (d, i) => i * 30)
		   .attr("y", (d, i) => h - 3 * d)
		   .attr("width", 25)
		   .attr("height", (d, i) => d * 3)
		   .attr("fill", "navy")
		   .attr("class", "bar")
		   .append("title")
		   .text((d) => d)
		
		svg.selectAll("text")
		   .data(dataset)
		   .enter()
		   .append("text")
		   .text((d) => d)
		   .attr("x", (d, i) => i * 30)
		   .attr("y", (d, i) => h - (d * 3 + 3))
		
	</script>
</body>

在这里插入图片描述

3.5 scatter plot

使用svg的cicle节点画点

3.6 示例

<body>
	<script>
		const dataset = [
				[ 34, 78 ],
				[ 109, 280 ],
				[ 310, 120 ],
				[ 79, 411 ],
				[ 420, 220 ],
				[ 233, 145 ],
				[ 333, 96 ],
				[ 222, 333 ],
				[ 78, 320 ],
				[ 21, 123 ]
			];
		
		const w = 500;
		const h = 500;
		
		const svg = d3.select("body")
					  .append("svg")
					  .attr("width", w)
					  .attr("height", h);
		
		svg.selectAll("circle")
		   .data(dataset)
		   .enter()
		   .append("circle")
		   .attr("cx", (d, i) => d[0])
		   .attr("cy", (d, i) => h - d[1])
		   .attr("r", 5);
		
		svg.selectAll("text")
		   .data(dataset)
		   .enter()
		   .append("text")
		   .text((d) => "" + d[0] + ", " + d[1])
		   .attr("x", (d) => d[0] + 5)
		   .attr("y", (d) => h - d[1])
	</script>
</body>

在这里插入图片描述

3.7 Scales

Scales函数将一组原始数据点映射到SVG画布的像素上

3.7.1 scaleLinear

scaleLinear用于定量数据

const scale = d3.scaleLinear();

3.7.2 domain, range

domain 和 range 分别设置输入输出的数据范围

// Set a domain
// The domain covers the set of input values
scale.domain([50, 480]);
// Set a range
// The range covers the set of output values
scale.range([10, 500]);
scale(50) // Returns 10
scale(480) // Returns 500
scale(325) // Returns 323.37
scale(750) // Returns 807.67

3.7.3 min, max

min和max 分别找出数据集中的最小值和最大值

const exampleData = [34, 234, 73, 90, 6, 52];
d3.min(exampleData) // Returns 6
d3.max(exampleData) // Returns 234

const locationData = [[1, 7],[6, 3],[8, 3]];
// Returns the smallest number out of the first elements
const minX = d3.min(locationData, (d) => d[0]);// minX compared 1, 6, and 8 and is set to 1

3.8 示例

<body>
	<script>
		const dataset = [
				[ 34, 78 ],
				[ 109, 280 ],
				[ 310, 120 ],
				[ 79, 411 ],
				[ 420, 220 ],
				[ 233, 145 ],
				[ 333, 96 ],
				[ 222, 333 ],
				[ 78, 320 ],
				[ 21, 123 ]
			];
		
		const w = 500;
		const h = 500;
		const padding = 60;
		
		const xScale = d3.scaleLinear()
						 .domain([0, d3.max(dataset, (d) => d[0])])
						 .range([padding, w - padding]);
		
		const yScale = d3.scaleLinear()
						 .domain([0, d3.max(dataset, (d) => d[1])])
						 .range([h - padding, padding]);
		
		const svg = d3.select("body")
					  .append("svg")
					  .attr("width", w)
					  .attr("height", h);
		
		svg.selectAll("circle")
		   .data(dataset)
		   .enter()
		   .append("circle")
		   .attr("cx", (d) => xScale(d[0]))
		   .attr("cy", (d) => yScale(d[1]))
		   .attr("r", 5)
		
		svg.selectAll("text")
		   .data(dataset)
		   .enter()
		   .append("text")
		   .text((d) => (d[0] + ", "+ d[1]))
		   .attr("x", (d) => xScale(d[0] + 10))
		   .attr("y", (d) => yScale(d[1]))
		
	</script>
</body>

在这里插入图片描述

3.9 axes

axesLeft()生成 y 轴
axesBottom()生成 x 轴

const xAxis = d3.axisBottom(xScale);

svg.append("g")
   .attr("transform", "translate(0, " + (h - padding) + ")")
   .call(xAxis);

3.10 示例

<body>
	<script>
		const dataset = [
				[ 34, 78 ],
				[ 109, 280 ],
				[ 310, 120 ],
				[ 79, 411 ],
				[ 420, 220 ],
				[ 233, 145 ],
				[ 333, 96 ],
				[ 222, 333 ],
				[ 78, 320 ],
				[ 21, 123 ]
			];
		
		const w = 500;
		const h = 500;
		const padding = 60;
		
		const xScale = d3.scaleLinear()
						 .domain([0, d3.max(dataset, (d) => d[0])])
						 .range([padding, w - padding]);
		
		const yScale = d3.scaleLinear()
						 .domain([0, d3.max(dataset, (d) => d[1])])
						 .range([h - padding, padding]);
		
		const svg = d3.select("body")
					  .append("svg")
					  .attr("width", w)
					  .attr("height", h);
		
		svg.selectAll("circle")
		   .data(dataset)
		   .enter()
		   .append("circle")
		   .attr("cx", (d) => xScale(d[0]))
		   .attr("cy",(d) => yScale(d[1]))
		   .attr("r", (d) => 5);
		
		svg.selectAll("text")
		   .data(dataset)
		   .enter()
		   .append("text")
		   .text((d) => (d[0] + "," + d[1]))
		   .attr("x", (d) => xScale(d[0] + 10))
		   .attr("y", (d) => yScale(d[1]))
		
		const xAxis = d3.axisBottom(xScale);
		const yAxis = d3.axisLeft(yScale);
		
		svg.append("g")
		   .attr("transform", "translate(0," + (h - padding) + ")")
		   .call(xAxis);
		
		svg.append("g")
		   .attr("transform", "translate(" + padding +",0)")
		   .call(yAxis);
		
	</script>
</body>

在这里插入图片描述

bananalone
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端数据可视化：利用D3.js创建动态图表
Sun_blog
06-29 1688
数据可视化是将数据以图表、图形等形式展示出来，以便更直观地理解和分析数据。D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于创建交互式和动态的数据可视化。本文将介绍如何使用D3.js创建动态图表，并通过一个具体的示例来说明。通过使用D3.js，我们可以轻松地创建动态图表，使数据更加直观和易于理解。在本文中，我们以柱状图为例，展示了如何使用D3.js创建动态图表，并通过代码示例进行了说明。希望本文能帮助你更好地理解和应用D3.js进行前端数据可视化。
D3.js入门基础教程
Quest_sec的博客
03-19 4990
什么是“框架”，框架是应用程序“模板” 就好比“八股”文章，不论好坏，按照规则填填就是 什么是“应用程序”，应用程序是完成某项特定任务的代码堆砌 也可以说是“套路” 当你完成了一、二个项目后，你是不会放弃承载着你大量心血的“代码集”的 你会在第三、第四…个项目中重复你的思路、代码，当然也包括改进或创新 于是，“框架”出现了…… 程序设计中的框架包含DoitPHP(原Tommy...
D3JS的简单学习
weixin_41897680的博客
03-24 3353
D3JS的简单学习
D3JS教程_编程入门自学教程_菜鸟教程-免费教程分享
IT搬运工
08-02 1546
D3是Data-Driven Documents的缩写，D3.js是一个基于数据管理文档的资源JavaScript库。D3 是最有效的数据可视化框架之一。它允许开发人员在 HTML、CSS 和 SVG 的帮助下在浏览器中创建动态的交互式数据可视化。数据可视化是将过滤后的数据以图片和图形的形式表现出来。D3.js入门教程。
D3.js入门之旅--基础讲解
Blog of Leviash
09-12 2092
D3.js（Data-Driven Documents）是一个用于创建数据可视化的JavaScript库。它使用HTML、SVG和CSS等Web标准来呈现数据，帮助开发者通过数据驱动方式构建交互式、动态的可视化图表和图形。D3.js的主要优点包括灵活性、强大的数据处理能力和对Web标准的广泛支持。在学习D3.js时，我们将了解到如何使用JavaScript操作和绑定数据，创建可扩展的可视化效果，并在图表中实现交互和动画等功能。
D3.js 介绍与入门
kang_k的博客
06-26 9093
D3.js（全称：Data-Driven Documents）数据驱动文档是一个基于数据驱动 DOM 的 JS 库。 相比EChart、G2...之类的封装好的图标库，D3就像一个Jquery。 封装了很多函数供开发者使用。
数据可视化笔记.zip
05-23
- ECharts、D3.js：JavaScript库，用于创建高度定制的网页可视化。 4. 数据可视化设计原则 - 清晰性：确保图表易于理解，避免过多的细节和装饰性元素。 - 适当性：选择最适合数据类型的图表，例如，用柱状图比较...
onimm:svg 思维导图 d3.js
07-14
D3.js的核心功能包括数据绑定、数据转换、数据驱动的DOM操作以及动画等，这使得它在数据可视化领域非常受欢迎。 在“onimm-master”这个压缩包中，很可能是包含了该项目的源代码、示例、文档和其他相关资源。开发者...
Awesomedataviz一些很棒的数据可视化库和资源列表
08-10
在JavaScript开发中，数据可视化库提供了丰富的工具，帮助开发者创建交互式、动态且具有吸引力的图表。"Awesome dataviz"是一个集合了各种高质量数据可视化库和资源的列表，旨在帮助开发者更高效地进行数据展示和...
谷歌师兄的leetcode刷题笔记-SmashChart:个人D3项目可视化SuperSmashBrothers近战数据
06-30
《谷歌师兄的LeetCode刷题笔记——SmashChart：个人D3项目可视化Super Smash Brothers近战数据解析》 在IT领域，数据可视化是一项至关重要的技能，它能够将复杂的数据转化为直观、易于理解的图形，帮助分析人员快速...
d3-Scatterplot-Graph-fcc:FreeCodeCamp d3散点图
04-13
d3-散点图-fcc FreeCodeCamp d3散点图
D3可视化史上最全中文文档
11-22
不解释，想看的就下载吧。可视化神书！
D3.js入门教程
10-30
近年来，可视化越来越流行，许多报刊杂志、门户网站、新闻媒体都大量使用可视化技术，使得复杂的数据和文 字变得十分容易理解，有一句谚语“一张图片价值于一千个字”，正是如此。D3 正是数据可视化工具中的佼佼 者，基于 JavaScript 开发，项目托管于 GitHub。从 D3 诞生以来，不断受到好评，在 GitHub 上的项目仓库排 行榜也不断上升。本教程的目的在于提供一个
d3.js实现知识图谱可视化
11-14
js实现知识图谱可视化，可移植性强，效果良好，我是用在了Django框架下，对于知识图谱查询结果的输出，也可以用在spring框架下。
data-viz-mining:数据可视化和挖掘团队的共享学习资源、笔记和练习
07-23
D3.js（Data-Driven Documents）是一个JavaScript库，特别适合创建高度定制的、交互式的数据可视化。团队的笔记可能涵盖如何使用这些工具创建各种图表，如折线图、柱状图、散点图和热力图等，并解释如何利用颜色、...
可视化工具D3.js教程 入门 （第十三章）—— 树状图
weixin_44867717的博客
09-23 1903
可视化工具D3.js教程 入门 （第十三章）—— 树状图 要用到的知识点，如需详细了解，请戳这里查看中文官方文档 d3.hierarchy - 从给定的层次结构数据构造一个根节点并为各个节点指定深度等属性. node.sum - 评估和汇总定量值. d3.tree - 创建一个新的整齐(同深度节点对齐)的树布局. tree - 将指定的层次数据布局为整齐的树布局. tree.size - 设置布局尺寸. tree.separation - 设置两个相邻的节点之间的间距. node.descendants -
D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js
热门推荐
数星星等天明的博客
04-22 2万+
D3.js的v5版本入门教程（第一章）     1、需要的一些工具         这个其实随便！最简单的就是建一个.txt文件就可以敲起代码来！作者本人用的是myeclipse（主要需要安装tomcat），因为写的是前端，一个浏览器查看效果当然是不可少的，建议使用chrome 浏览器，其强大的调试功能可以让你事半功倍！     2、需要预备的知识         如果你是编程小白，那么这...
可视化工具D3.js教程 入门 （第十一章）—— 饼图
weixin_44867717的博客
09-23 2174
可视化工具D3.js教程 入门 （第十一章）—— 饼图 首先我们先梳理下 绘制饼图之前 需要掌握的新知识： 1、d3.arc——创建一个新的 arc 生成器 d3.arc(arguments ) 生成器用来在饼图或圆环图中生成 圆形 或 扇形 或 环形； arguments 是任意的; 它们只是简单地传递到 arc 生成器的访问器函数的对象。例如，根据默认的设置，传入的对象应该包含以下半径和角度信息: 　　arc({ 　　innerRadius: 0, 　　outerRadius: 100,
d3.js数据可视化实战手册
最新发布
12-24
《d3.js数据可视化实战手册》是一本介绍如何使用d3.js库进行数据可视化的实用指南。这本书很适合那些想要深入了解数据可视化技术并且对d3.js有一定了解的读者。 首先，本书详细介绍了d3.js的基本概念和原理，帮助读者建立起对这个库的全面认识。接着，书中从实际案例出发，演示了如何使用d3.js来创建各种类型的图表和可视化效果，包括柱状图、折线图、饼图、地图等。读者可以通过跟随书中的案例代码，逐步学习如何利用d3.js库来构建复杂的数据可视化应用。 此外，本书还介绍了d3.js的一些高级特性和技巧，让读者能够更好地利用这个库进行数据可视化的定制和优化。同时，作者还提供了一些实战经验和最佳实践，帮助读者避免一些常见的问题和错误，让他们能够更快地掌握d3.js的应用技巧。 总的来说，《d3.js数据可视化实战手册》是一本内容丰富、实用性强的书籍，对于想要深入学习数据可视化技术和提高d3.js应用水平的读者来说，是一本非常值得阅读的指南。通过学习这本书的内容，读者可以快速掌握d3.js的使用技巧，从而能够更加灵活地应用这个库来展示和分析各种类型的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值