1.1选择select

一、核心（Core）

1.1选择

1.1.1 d3.select(selector)

​ 选择第一个与指定字符串selector匹配的元素，如果没有就返回空。

例如：

<table>
			<tr>
				<td>苹果</td>
				<td>香蕉</td>
				<td>西瓜</td>
			</tr>
			<tr>
				<td>桃子</td>
				<td id="test">草莓</td>
				<td>菠萝</td>
			</tr>
		</table>

		<table>
			<tr>
				<td>可乐</td>
				<td>牛奶</td>
			</tr>
			<tr>
				<td>绿茶</td>
				<td class="test">啤酒</td>
			</tr>
		</table>

下列选择器的结果：

d3.select('td')		//选择第一个td标签
d3.select('#test')	//选择第一个ID名为"test"的元素
d3.select(".test")	//选择第一个类名为"test"的元素

1.1.2 d3.select(node)

​ 选择指定的结点，通常用于在事件监听器中使用d3.select(this)选择当前节点。

例如，上面的表格，想要在单机body时设置选中元素的字体颜色变为绿色，可以这样

d3.select(document.body).on('click',function(){
    console.log(d3.select(this));
    d3.select(this).style("color","green");
})

1.1.3 d3.selectAll(selector)

​ 选择所有与指定字符串相匹配的元素，结果为一个数组，没有匹配到元素的话，返回空。

例如：

	d3.select('tr').selectAll('td').style('color','white').style('background-color','orange')

1.1.4 d3.selectAll(nodes)

​ 选择指定的结点数组

例如：

d3.selectAll(this.childNodes)	//在一个事件监听器中，选择当前元素的所有子元素
d3.selectAll(document.links)	//选择文档中所有的超链接

1.1.5 selection.attr(name[value])

​ 给选中的对象设置属性，value可以是常数，也可以是函数，函数的时候有两个参数（data,index),(数据，索引)可以根据函数返回值给每个元素设置参数。

例如：

//创建矩形
			rects=svg.selectAll("rect")
					.data(dataset)
					.enter()
					.append("rect")
					.attr({	//一次设置多个属性值
						"x":(d,i)=>{ return 20+i*160/dataset.length;},	//使用函数设置属性值
						"y":d=>20,
						"width":20,
						"height":100
					})
					.attr("fill","steelblue");	//矩形颜色

1.1.6 selection.classed(name[value])

​ 为选择的元素添加，移出或者切换CSS类；value可以是函数，函数时两个参数（data，index），index是当前data在selection中的索引，函数将返回bool值；value为true时，绑定css类，false时移出css类。

例如：将rects索引为奇数的矩形填充为紫色，偶数的填充为番茄红色。

<style type="text/css">
			.even{
				fill:purple;
			}
			.odd{
				fill:tomato;
			}
			.stroke{
				stroke:deepskyblue;
				stroke-width:5;
			}
			.opacity{
				opacity:0.5;
			}
</style>

rects.classed({
    "odd":function(d,i){ return i%2==0?true:false;},
    "even":function(d,i){ return i%2==0?false:true;}
});

​ 然后，给这些矩形绑定点击事件。在点击鼠标是判断这个矩形绑定的css类，根据这个判断结果给这个矩形添加stroke类，或者取消stroke类。

rects.on('click',function(){
    let rect = d3.select(this);
    rect.classed('stroke opacity')?rect.classed('stroke opacity',false):rect.classed('stroke opacity',true);
})

1.1.7 selection.style(name[value[priority]])

​ 返回选择集中第一个非空元素中名为name的样式值，或者设置样式，可以同时设置多个样式，也可以使用函数设置不同的样式。

例如：为矩形设置不同的style

rects.style({
    "stroke-width":5,
    "stroke":(d,i)=>{
    	return `rgb(${10*d},${10*(25-d)},${d})`
	}
})

1.1.8 selection.property(name,[value])

​ 为html中一些特殊的内置属性设置值，如表单中的value属性，复选框的checked属性，用法与前面的相同。

例如：为input输入框设置默认值，为复选框设置默认值

d3.select('#text-id').property('value',	123456);
d3.select("#check-box").property('checked',true);

1.1.9 selection.text([value])

​ 返回第一个非空元素的文本，或者为所有元素设置文本。

1.1.10 selection.html([value])

​ 设置内部html内容为value，value可以是函数，用法同上，也可以为空，为空时，返回当前的html内容。

例如：在原来的基础上增加新的内容

d3.select('body').html(function(d,i){
    let old = d3.select('this').html()
    return old+"<h1>HI</h1>";
})

1.1.11 selection.append(name)

​ 当前选择集的最后添加新的元素，返回的集合中包含新添加的元素。

例如：添加一个矩形

let svg = d3.select('body').append('svg');
svg.append('rect')
    .attr({
    x:10,
    y:10,
    height:100,
    width:40,
    fill:'orange'
});

1.1.12 selection.insert(name[before])

​ 在before前面添加元素，如果没有before的话，用法和append相同

例如：在rect前面添加circle

svg.insert('rect');
svg.insert('circle','rect');
svg.insert('circle',(d,i)=>{"rect"})

1.1.13 selection.remove()

​ 将选择的元素删除，并返回。

例如：将上面的circle删除

let removed = svg.select('circle').remove();
console.log(removed);

1.1.14 selection.data(values[key])

​

1.1.15 selection.datum([value])

​ 不绑定value，则返回第一个非空元素绑定的数据，绑定了value则将选中的元素值更改为value。

例如：

d3.selectAll("text").datum("aaaa").text(d=>d)	//将所有text修改为"aaaa"

​ 还可以访问来自HTML5自定义数据属性，例如：

<div data-username="D3 user"></div>
<div data-username="D3 fans"></div>

	d3.selectAll("div")
		.datum(function() { return this.dataset; })	//获取HTML5自定义数据属性
		.text(function(d){ return d.username;});	//使用获取的数据设置文本的值

1.1.16 selection.sort(comparator)

​ 排序，

例如：

svg.selectAll("text").sort((a,b)=>a.value-b.value)	//根据计算结果的正负来排序，为正的话，a在前。

1.1.17 selection.on(type[listener[capture]])

​ 绑定或者移除事件监听器。type是事件名，listener是函数，有d，i两个参数。

例如：

d3.select("button").on("click",function(){
    d3.select("svg").selectAll("text").text(function(d,i){
        return "new	:"+d*3;
    })
})

1.1.18 d3.event

​ 全局对象，是一个DOM事件，实现了标准事件字段，比如：时间戳、键代码等。

例如：不过鼠标位置相对于父容器的偏移坐标。

var pos = "d3.event pos"+d3.event.offsetX + ',' + d3.event.offsetY;

1.1.19 selection.transition()

​ 为选择集开启一段过度动画。

例如：

d3.select('svg').append('circle').attr({
    cx:100, cy:100, r:40,
    fill:'orange'
});

d3.selct('svg').select('circle').transition().attr("fill","blue");

1.1.20 selection.call(function[argument])

​ 调用指定的函数，使用这种方式调用函数，方便链式调用。

需要注意的是，function的第一个参数。

例如：

function	fill(ele,fill){
    this.style("fill",fill);
}

rect.call(fill,"orange");
circle.call(fill,"tomato");

1.1.21 selection.empty()

​ 当前选择为空的话，返回true。

1.1.22 selection.node()

​ 返回当前选择的第一个非空的元素。如果为空，返回null。

1.1.23 selection.size()

​ 返回在当前选择的总个数。

1.2 过渡