D3js中each与call使用区别
2019-01-10 14:31:35 骤逝 阅读数 504更多
在对选集中的对象进行操作的时候，each和call都可以使用，通过如下代码具体分析他们使用的区别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../d3.min.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.box {
height: 100px;
100px;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<span id="eachSelect">
<div></div>
<div></div>
<div></div>
</span>
<span id="callSelect">
<div></div>
<div></div>
<div></div>
</span>
<script type="text/javascript">
// 1-code
d3.select("#eachSelect").selectAll("div")
.attr("class", "red box")
.each(function (d, i) {
d3.select(this).append("h1").text(i);
});
// 2-code
d3.select("#callSelect").selectAll("div")
.attr("class", "blue box")
.call(function (d, i) {
d.append("h1").text(i);
//this.append("h1").text(i);
}, "1");
// 3-code
// d3.select("#callSelect").selectAll("div")
// .attr("class", "blue box")
// .call(function (d) {
// d.each(function (d, i) {
// d3.select(this).append("h1").text(i);
// });
// });
</script>
</body>
</html>1.code中使用的each，可以看出来他的作用是对选集中的对象进行遍历操作，其中参数d为undefined，参数i为遍历元素的下标，this表示当前操作的对象；
2.code中使用的call，可以看出来其中的d参数就是选集中的对象与this一样，d之后的参数由用户自定义传递；
如果您使用了call也可以变通的实现each的操作过程，例如3-code的例子。