200202.md

D3 选择,查看,设定和操作元素

1. 常用选择元素方法
2. 查看元素选择集状态
3. 设定元素
4. 元素的操作：增删和插入

##　one：常用选择元素方法，也是实例化 D3 对象

1. select：返回选择元素集合的第一项
2. selectAll：返回所有选择元素

---

two：查看元素选择集状态

我们将选择元素获得的对象称为选择集-selection；即 let selection = d3.select("p");

1. 查看选择集是否为空：selection.empty();为空返回 true，否则返回 false
2. 返回第一个非空元素：selection.node();
3. 查看选择集的元素个数：selection.size();

---

three：设定元素

1，selection.attr(name[, value])可以设定元素和获取元素属性

设定属性

selection.attr(name, value)，一般会在元素上以 name = vlue 出现，路 fill = "red"

let svg = d3.select(".d3-box-svg").append("svg");
svg.attr('width', "500px");

适用的属性

1. svg 元素的位置属性：x,y,cx,cy
2. svg 元素的长度属性：r,widht,height
3. svg 元素边框：border
4. svg 元素填充颜色：fill
5. 元素的 class：class
6. 元素的 id：class

获取元素属性

获取某个属性的值，省略第二个参数即可，selection.attr(name)

let svgW = d3.select(".d3-box-svg").attr("width");

2，selection.classed(name[, value])：元素 class 值的设定

可以添加，删除元素的 class 值，可以对元素 class 的值进行切换

1. selection.classed("test", true): 元素添加指定 class 值
2. selection.classed("test", false): 元素删除指定 class 值

3，selection.style(name[, value[, priority]])：元素样式值的设定

设定样式

svg.append('text')
style("font-size", "24px");

适用的属性

1. 普通元素的字体颜色属性：corlor
2. 元素的字体大小属性：font-size
3. 元素边框：border

4，selection.property(name[, value])：元素一些指定属性设定

获得属性值输入一个值，设定属性输入两个值

试用的属性

1. 文本输入框的 value：value

d3.select("input").property("value", "test");

5，selection.text([value])：设定或者获取元素的文本内容

省略 value 返回该元素的文本内容

svg.append('text')
  .text('正四边形');

6，selection.html([value])：设定或者获取元素的 html

相当于 dom 对象的 innerHtml，没有值时是获取元素内部的 html

// 往元素内部添加一个圆 
svg.html('<circle cx="120" cy="120" r="30" fill="red" class="test5"></circle>')

---

four：对元素的操作：增删和插入

1. selection.append(name): 在选择元素内部末尾添加一个子元素
2. selection.insert(name[, ele]): 在选择元素内部指定的子元素 ele 前面插入一个元素，如若没有制定元素 ele ，则跟 append 方法相同
3. selection.remove(): 删除选定的元素