d3-元素筛选

元素筛选

基础筛选

format	description
foo	foo标签
#foo	id为foo
.foo	class包含foo
[foo=goo]	存在属性foo=goo
foo goo	foo下的goo标签
foo#goo	foo下的id为goo
foo.goo	foo下的class包含goo
foo:first-child	foo标签的第一个子元素
foo:nth-child(n)	foo标签下的第n个元素

单元素选择

<p id="target"></p>
<script type="text/javascript">
	d3.select("p#target").text("hello world !");
</script>

• attr

// 设置属性
d3.select("p").attr("foo", "goo");
// 获取属性
d3.select("p").attr("foo");

• classed

// 检测class是否有foo
d3.select("p").classed("foo");
// class添加属性
d3.select("p").classed("foo", true);
// class撤销 属性
d3.select("p").classed("foo", false);
// 支持方法入参
d3.select("p").classed("foo", function(){return false;});

• style

// 获取指定样式
d3.select("p").style("font-size");
// 设置属性
d3.select("p").style("font-size", "10px");
// 支持方法入参
d3.select("p").style("font-size", function(){return 1+2;});

• text

// 获取文本内容
d3.select("p").text();
// 设置文本内容
d3.select("p").text("hello world!"):
// 支持方法入参
d3.select("p").text(function (){return "hello world!";});

• html

// 获取文本内容
d3.select("p").html();
// 设置文本内容
d3.select("p").html("<b>inner html</b>");
// 支持方法入参
d3.select("p").html(function(){
    return "<b>inner html</b>"
});

多元素选择

d3.selectAll("p").attr("class", "red box");

子选择器

// 可以层级进行选择
d3.select("#sectionA").select("p").text("sectionA");
// 单行 > 拼接，简化层级选择
d3.select("#sectionB > p").text("sectionB");

元素操作

元素迭代

d3.selectAll("div.godme").each(function(d, i){
   d3.select(this).append("h1").text("godme"+i); 
});

operation	description
select(this)	拿到当前元素
append	添加元素
d	绑定数据
i	迭代顺序

级联调用

d3.select("body")
	.append("section")
		.attr("id", "section1")
	.append("div")
		.attr("class", "blue box")
	.append("p")
		.text("hello world!");
// 每次的选择或者添加，返回新一轮的元素，可以不停的递进深入进行设置
// 不可回溯，应该将节点的值单独保存，或者利用递归回溯

选集筛选

// 选集元素都在[0]
var ps = d3.selectAll("p");
var firstp = ps[0][0];
d3.select(firstp).text("firstp");
d3.select(ps[0][1]).text("01");
d3.select(ps[0][2]).text("02");
d3.select(ps[0][3]).text("03");