d3.js入门-03选择

最新推荐文章于 2022-09-16 11:34:49 发布

yishuihanxun

最新推荐文章于 2022-09-16 11:34:49 发布

阅读量218

点赞数

文章标签： d3.js

本文链接：https://blog.csdn.net/yishuihanxun/article/details/103399294

版权

选择是D3.js的核心概念之一.它基于CSS选择器.它允许我们在网页中选择一个或多个元素.此外，它允许我们修改，追加或删除与预定义数据集相关的元素.在本章中，我们将了解如何使用选择来创建数据可视化.

D3.js有助于使用以下两种方法从HTML页面中选择元素 :

select() : 通过匹配给定的CSS选择器，仅选择一个DOM元素.如果给定的CSS选择器有多个元素，则只选择第一个元素.
selectAll() : 通过匹配给定的CSS选择器来选择所有DOM元素.如果您熟悉使用jQuery选择元素，则D3.js选择器几乎相同.

让我们看看每个方法详细信息.

select()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
		
	</head>
	<body>
		  <p id="fristP">Hello World</p>
	</body>
	<script>
		var text = d3.select("p").text()
		console.log(text);
	</script>
</html>

控制台输出：hello word

如果有多个元素select() 则会自动选择第一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
		
	</head>
	<body>
		  <p>Hello World1</p>
		  <p>Hello World2</p>
	</body>
	<script>
		var text = d3.select("p").text()
		console.log(text);
	</script>
</html>

控制台输出：hello word1

selectAll() 返回一个元素数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
		
	</head>
	<body>
		  <p>Hello World1</p>
		  <p>Hello World2</p>
	</body>
	<script>
		var selectPs = d3.selectAll("p")
		console.log(selectPs);
	</script>
</html>

控制台输出：[Array(2)]

至于class，id 只需加上 .，# 即可与jquery是一样的

元素属性、值等数据添加修改方法：

append()方法：

append()方法将新元素作为当前选择中元素的最后一个子元素追加。

text()方法

text（）方法用于设置所选/附加元素的内容。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

D3.js提供了各种方法，html（），attr（）和style（）来修改所选元素的内容和样式。让我们看看本章中如何使用修改方法。

html()可以添加html代码

attr()可以设置元素属性

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      <a href="http://www.baidu.com" title="baidu">百度</a>
      <script>
         d3.select("a").attr("title","百度");
      </script>
   </body>
</html>

style()方法用于设置所选元素的样式属性

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      <a href="http://www.baidu.com" title="baidu">百度</a>
      <script>
         d3.select("a").attr("title","百度");
		 d3.select("a").style("color","red");
      </script>
   </body>
</html>

classed（）方法专门用于设置HTML元素的"class"属性

给某一元素添加class属性

d3.select(".myclass").classed("myanotherclass", true);

去除某一元素的某一属性

d3.select(".myclass").classed("myanotherclass", false);

yishuihanxun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫