D3.js总结

最新推荐文章于 2023-01-12 17:47:43 发布

柒柒钏

最新推荐文章于 2023-01-12 17:47:43 发布

阅读量178

点赞数

分类专栏：前端知识文章标签： js

本文链接：https://blog.csdn.net/weixin_44141284/article/details/117739748

版权

前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、选择元素

在D3.js中，选择元素的函数有两个

d3.select()

d3.selectAll()
这两个函数返回的就是选择集

常见的用法如下：

    var body = d3.select("body");//选择文档中的body元素

  	var svg = body.select("svg");//选择body中的svg元素

  	var p = body.selectAll("p");//选择body中所有的p元素
  	
  	var p1 = body.select("p");//选择body中第一个p元素

2、绑定数据

D3.js中绑定数据的两个函数

data()：讲一个数组绑定到选择集上，数组各项和选择集各元素绑定，也就是一一对应的关系（这里或许敏锐的你会发现问题，下一章节讲）
datum()：将一个数据绑定到所有选择集上

相比较而言，data()较常用

datum()的使用

<body>

    <p>dog</p>

    <p>cat</p>

    <p>pig</p>

    <script>
        var str = "is an animal";//新建一个字符串
        var p = d3.select("body")
            .selectAll("p");

        p.datum(str)//绑定
            .text(function(d,i){   // d是数据   i 是索引，从0开始
                return "第"+i+"个元素"+d;
            });
    </script>
</body>

代码说明：

    可以发现，本段代码的作用是将str这个字符串绑定代三个<p>选择集上，然后通过一个无名函数function(d,i)，访问到绑定的元素。（function(d,i)，这样的函数后面会经常出现，其中d代表数据，也就是与某元素绑定的数据，i代表索引，代表数据的索引，从0开始）

data()的使用

<body>

    <p>dog</p>

    <p>cat</p>

    <p>pig</p>
    <script>
        var dataset = ["so cute","cute","fat"];
        var p = d3.select("body")
            .selectAll("p");

        p.data(dataset)
            .text(function(d,i){
                return "第"+i+"个动物"+d;
            });
    </script>  
</body>

代码说明：

    其实和datum()大体一样，只不过现在是数组元素和选择集有着对应关系

1、Update与Enter的使用

<body>
    <p>dog</p>
    <p>cat</p>
    <p>pig</p>
    
    <script>
    	var dataset = [3,6,9,12,15];
    	var p = d3.select("body")
    		.selectAll("p");
    	var update = p.data(dataset)//绑定数据,并得到update部分
    	var enter = update.enter();//得到enter部分
    	//下面检验是否真的得到
    	//对于update的处理
    	update.text(function(d,i){
    		return "update: "+d+",index: "+i;
    	})
    	//对于enter的处理
    	//注意，这里需要先添加足够多的<p>，然后在添加文本
    	var pEnter = enter.append("p")//添加足够多的<p>
    	pEnter.text(function(d,i){
    		return "enter: "+d+",index: "+i;
    	})
    </script>
  </body>

运行结果：

update:3,index:0
update:6,index:1
update:9,index:2
update:12,index:3
update:15,index:4

代码说明：

    -var update = p.data(dataset) 表示绑定数据,并得到update部分，

    -var enter = update.enter() 表示得到到enter部分

    -var pEnter = enter.append("p")//添加足够多的<p>

  pEnter.text(function(d,i){

		return "enter: "+d+",index: "+i;

        }) 表示添加足够多的<p>，并设置文本

2、Update与Exit的使用

<body>
    <p>dog</p>
    <p>cat</p>
    <p>pig</p>
    <p>rat</p>
    
    <script>
    	var dataset = [3,6];
    	var p = d3.select("body")
    		.selectAll("p");
    	var update = p.data(dataset)//绑定数据,并得到update部分
    	var exit = update.exit();//得到exit部分
    	//下面检验是否真的得到
    	//对于update的处理
    	update.text(function(d,i){
    		return "update: "+d+",index: "+i;
    	})
    	//对于exit的处理通常是删除 ，但在这里我并没有这么做   	
    	exit.text(function(d,i){
    		return "exit";
    	})
    </script>
  </body>

运行结果：

update:3,index:0

update:6,index:1

exit

exit

代码说明：

   这里需要说明的是：在得到exit部分后，不需要使用append("xx")来添加元素，而enter需要，这样很容易理解其实。还有就是，对于exit部分的处理通常是删除exit.remove();（这里还没讲，下一章会详细讲解）

1、选择元素

var dataset = [3,6,9,12];
var p = d3.select("body")
    .selectAll("p")
    .data(dataset)
    .text(function(d,i){
        if(i==3){
           d3.select(this).style("color","red");
        }
    return d;
})

运行结果：

3
6
9
12(red)

2、插入元素

append()：在选择集尾部插入元素

    var p = d3.select("body")
        		.append("p")
        		.text("another animal")
        		.style("color","red");

代码说明：

   也就是先选择<body>这个元素，然后在其内部的最后添加一个新的<p>

insert()：在选择集前面插入元素

    var p = d3.select("body")
        		.insert("p","#myP3")
        		.text("insert an animal")
        		.style("color","red");

代码说明：

   insert("p","#myP3")表示在属性id为myP3的元素前面插入一个新的元素<p>，前面我们已经知道，我们将第三个<p>元素的属性id设为myP3，（pig），所以结果正确

3、删除元素

var p = d3.select("body")
    		.select("#myP3")
    		.remove();

它就是一个否定选择器，可以选择除某个元素之外的所有元素。场景的话看情况吧，一般用来根据条件来过滤取反的。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框。

[code=python]

input:not([type="submit"]){

  border:1px solid red;

}

柒柒钏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3.js总结

1、选择元素在D3.js中，选择元素的函数有两个d3.select()d3.selectAll()这两个函数返回的就是选择集常见的用法如下： var body = d3.select("body");//选择文档中的body元素 var svg = body.select("svg");//选择body中的svg元素 var p = body.selectAll("p");//选择body中所有的p元素 var p1 = body.select("p"
复制链接

扫一扫