D3学习指北–第三章，D3的基础操作

前言

因为这个系列是学习总结与理解，所以基础的东西并不会全部讲解，只是
基础学习之上的参考，每个人都要有自己的思考。流言止于智者，尽信书不如无书等语句
希望大家谨记。另外，D3支持链式操作。

1、元素选择操作

D3提供了两种元素选择函数select和seclectAll两种，可以根据标签名，id名，class查找。

d3.select(".one").select("#two").selectAll("p")

这段代码的意思是“查询第一个class为one的标签内的id为two的标签内的所有p元素。

2、选择集操作

上述代码会返回一个选择集（ selection）

选择集状态有三种:

selection.empty() 判断选择集是否为空
selection.node() 返回第一个非空元素
selection.size() 返回选择集的长度

选择集的操作集合:

selection.attr( name[,value])
    selection.attr("id","test") //设定选择集的id为test，attr能添加任意元素的属性
selection.cassed( [name[,value]
    //这个方法目前为止用的不多，详情可以自己搜索，如果以后用途广，会从新进行讲解
selection.style( name[,value,[priority]])
    selection.style("color","red")//设定选择集css样式color为red
selection.property( name[,value])
    //这个方法主要针对input等特殊元素，用处不多，用到时可以临时了解
selection.text([value])
    //设定元素内文本信息，如果没有参数，返回元素内文本信息，没有标签
selection.html([value])
    //设定元素内html内容，如果没有参数，返回元素内信息，含有标签

3、选择集的添加、插入、删除

selection.append(Tag_name)    /
    selection.append("p")//在选择集末尾添加一个p标签
selection.insert(Tag_name)
    selection.insert("p")//在选择集指定对象后添加一个p标签
selection.remove()//删除选择集的元素

4、数据绑定

数据绑定是D3里一个最重要的操作，可以说这个数据绑定成就了D3。是其关键的一个元素
，刚认识的时候可能会有一点点难以理解，但是没关系，这里我会用大量的篇幅解释。请务必把这点搞
懂。

D3提供了两种数据绑定函数
selection.data()与selection.datum()

如果几个数组[3,6,9]要绑定一个元素集上，
用data()方法会令1绑定到第一个元素上，2绑定到第二个
元素上，3绑定到第三个元素上;

用datum()方法会令[3,6,9]绑定到第一个元素上，[3,6,9]绑定到第二个元素上，[3,6,9]绑定到第三个元素上。

那么数据绑定到数据的哪里了呢？答案是绑定到了元素的__data__属性上。

数据绑定到元素上后怎么提取数据呢？

下面是一个数据绑定后将元素文本改成绑定数据的的小例子,用到了之前修改文本的selection.text()
方法，和数据集选择方法：

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script src="js/d3.js"></script>
    <script>
    var dataset =[3,6,9];
    var ele = d3.selectAll("p").data(dataset).text(function (d,i) {
     
     
        return d;
    })
    </script>
</body>

获取绑定的元素的方法是用一个匿名函数，参数可以传入d,i。d是绑定数据，i是第几个数据。

推荐大家将d,i的名字替换看能不能成功获取。

扫描二维码关注公众号，回复： 12899979 查看本文章

5、思考

上面我们用data()和datnum()绑定了数据。

datnum()可以把数据绑定到每一个数据上，但是data()因为数据跟元素的长度不同
可能会出现3情况:

数据个数跟元素个数相等
数据个数大于元素个数
元素个数小于数据个数

第一种情况很好，所以我们不考虑，那么后两种情况的出现我们该怎么操作多的元素
或者多的数据呢？

D3给出了两种方法，分别对应两种情况

selection.enter() //返回比元素多的数据集
selection.exit() //返回比数据多的元素

下面是两个例子

数据比元素多，多的数据操作为,添加一个p标签，文本为多的数据:

<body>
<p>1</p>
<p>2</p>
<script src="js/d3.js"></script>
<script>
    var dataset =[3,6,9];
    var ele = d3.selectAll("p").data(dataset).enter().append("p").text(function (d,i) {
     
     
        return d;
    })
</script>
</body>

数据比元素多

元素比数据多，多的元素操作为,将多的元素文本修改成”没有绑定数据“:

<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script src="js/d3.js"></script>
<script>
    var dataset =[3,6];
    var ele = d3.selectAll("p").data(dataset).exit().text("没有绑定数据")
</script>
</body>

在这里插入图片描述

那么有这么多情况，我们该如何处理有序又优雅的处理这些问题呢？

我们可以把问题模式化处理，这样我们既不混乱，也能优雅的吹嘘自己的代码如刘禹锡的诗一般工整。

规模化处理问题的关键就是我我们同时考虑数据比元素多的情况，与元素庇护居多的情况。并且分别处理。

我把数据模式总结了一下:

selection = d3.selectAll(“p”).data(dataset) 获取选择的数据集并绑定数据

enter = selection.enter() 获取比元素多的数据

exit = selection.exit() 获取数据比多的元素

selection部分的处理方法

enter部分的处理方法 —一般添加元素append()

exit部分的处理方法—一般删除元素insert()

这个6步走将会是未来我们经常用的套路，熟练引用这个6步走会让我们事半功倍，并且非常容易查错

尾言

我以后每周会更新两篇博客，分别对应一个讲解和一个实现功能的结果及其里卖弄技巧的讲解。

如果能使我们头脑里的想象赋有一点诗意，灵魂里的幻想高于肉欲，那就会感到无比地幸福–《烟雾》

学习是一个走出舒适区的过程，其感觉是令人不适的。但是当我在里呆久了，这里边也成了我们的舒适区。

欢迎关注微信公众哈：流星蝴蝶没有剑。
每周更新最新的学习博客

D3.js学习指北--第三章，D3的基础操作