d3.js入门-04赋值

最新推荐文章于 2021-12-19 16:54:57 发布

yishuihanxun

最新推荐文章于 2021-12-19 16:54:57 发布

阅读量328

点赞数

文章标签： d3.js

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

版权

d3提供了为元素赋值的方法:datum(),data(), enter(),exit()

datum() ：是给单个元素赋值，与select()连用

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

   <body>
      <div>111</div>
      <script>
         d3.select("div")
         .datum("aaaa")
         .text(function(d) { 
            return "Created new paragraph element and the data " + d + " is assigned."; 
         });
      </script>
   </body>
</html>

data()：是给多个元素赋值，与selectAll()连用

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

   <body>
      <p></p>
	  <p></p>
      <div></div>
      <script>
         d3.selectAll("p")
         .data(["aaa","bbbb"])
         .text(function(d) { 
            return "Created new paragraph element and the data " + d + " is assigned."; 
         });
      </script>
   </body>
</html>

enter()：当data 设置的数值与选择的元素不匹配（设置的数值多）的情况将多出的数值预设置在其中，后边用appden去添加相应的元素，来展示也是与data，selectAll连用(该方法是给超出的预设元素赋值，不超出的是不会设置值的)

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

   <body>
	   <ul id="list">
	   </ul>
   
      <script>
    d3.select("#list").selectAll("li")
	.data([2,3,4])
          .enter()
       .append("li")
       .text(function(d) { return "This is dynamically created element and the value is " + d; });
      </script>
   </body>
</html>

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

   <body>
	   <ul id="list">
			<li>111</li>
			<li>222</li>
			<li></li>
			<li></li>
	   </ul>
   
      <script>
    d3.select("#list").selectAll("li")
	.data([2,3,4,2,3,1])
          .enter()
       .append("li")
       .text(function(d) { return "This is dynamically created element and the value is " + d; });
      </script>
   </body>
</html>

输出值为

111
222
This is dynamically created element and the value is 3
This is dynamically created element and the value is 1

exit():返回与data不匹配的元素，可以用来删除这些元素

yishuihanxun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
d3.js入门-04赋值

d3提供了为元素赋值的方法:datum(),data(), enter(),exit()datum() ：是给单个元素赋值，与select()连用<!DOCTYPE html><html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4...
复制链接

扫一扫