d3.js-选择集与数据

来源：互联网发布：windows ftp登录命令编辑：程序博客网时间：2024/05/21 08:39

选择集和数据

选择元素

select: 返回匹配选择器的第一个元素
selectAll:返回匹配选择器的元素集合

d3.select("body")d3.select("#important")d3.select(".content")基本和css的选择器相同不再累述

还支持链式写法：

<!--选择body下的所有p标签-->d3.select("body").selectAll("p")

选择集

d3.select() 和 d3.selectAll()返回的对象是选择集，可以对网页中的元素进行添加，删除，设定属性及样式

查看状态

selection.empty() 查看是否为空
selection.node() 不为空返回第一个元素，空则返回null
selection.size() 返回选择集有多少元素

设定和获取属性

<!--给body下的第一个p设置id为P1-->d3.select("body").select("p").attr("id","p1")

代码解释 selection.attr(name,value) 设置选集的属性 selection.classed(name,[true or false]) 设置css获取属性，true为设置，false为去除 selection.style(name,value) 设置选集的样式 selection.property(name,value) 设置获取选集的属性 selection.text() 设置或获取选集的文本内容 selection.html() 设置或获取选集内的html内容

添加，插入，和删除

代码解释 selection.append(name) 在选集的末尾添加一个元素 selection.insert(name,[,before]) 在选集中指定元素之前插入一个元素 seelction.remove() 删除选中元素

使用d3结合svg画圆

<!DOCTYPE html><html lang="zh">    <head>        <meta charset="UTF-8" />        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        <meta http-equiv="X-UA-Compatible" content="ie=edge" />        <title>Document</title>        <script src="js/d3.js"></script>        <link rel="stylesheet" type="text/css" href="css/styles.css" />    </head>    <body>        <script>            d3.select("body").append("svg")            .append("circle")            .attr("cx", "50")            .attr("cy", "50")            .attr("r", "10")            .attr("fill","red")        </script>    </body></html>

数据绑定

selection.datum([value]) 选择集中每一个都绑定相同的数据
selection.data([values[,key]]) 选择集中的每一个都保存数组中的每一项

点击连接：datum和data 的差别

进入-更新-退出

enter 数组长度 > 元素数量
update 数组长度 = 元素数量
exit 数组长度 < 元素数量

enter-update-exit

<body>        <p></p>        <p></p>        <p></p>        <script>            var data = [1,2,3]            var p = d3.select("body").selectAll("p")             //function 键函数，d为数据，i为index            p.data(data).text(function(d,i){                return d + ":" +i            })        </script>    </body>    <!--结果:-->    1:0    2:1    3:2

选择集的处理

enter的处理方法

<body>        <p></p>        <script>            //有三个数据，只有一个p标签            var dataset  = [1,2,3]            var p = d3.select("body").selectAll("p")            //得到与数据绑定的元素            var update = p.data(dataset)            //得到没有绑定元素的数据            var enter  = update.enter();            //设置与数据绑定的元素的text属性            update.text(function(d){                return d;            })            //添加标签来与多出的数据绑定            enter.append("p").text(function(d){                return d;            })        </script>    </body>

exit的处理方法

和enter相反，exit元素多，那么没有多的数据和它匹配，就把元素删除，一般放在操作的最好即可

一些其他的方法

方法解释 selection.filter() 进行过滤 selection.sort() 进行排序 selection.each() 对各个元素分别处理 selection.call() 允许将自身作为参数传递给某一函数

阅读全文

0 0