以下贴出代码，读者可以通过控制台输出体会选择器和数据绑定。
<!doctype html>
<html>
<head>
<script src="d3.js"></script>
</head>
<body>
<div><p></p><p></p><p></p><p></p></div>
<div><p></p><p></p><p></p><p></p></div>
<div><p></p><p></p><p></p><p></p></div>
<div><p></p><p></p><p></p><p></p></div>
<script>
var matrix = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
[13, 14, 15, 16]
];
var tr = d3.select("body")
.append("table") // adds <table>
.selectAll("tr") // selects all <tr>
.data(matrix) // joins matrix array
.enter() // create placeholders for each row in the array
.append("tr");// create <tr> in each placeholder
var td = tr.selectAll("td")
.data(function (d) { // joins inner array of each row
console.log(this);
return d;
})
.enter() // create placeholders for each element in an inner array
.append("td") // creates <td> in each placeholder
.text(function (d) {
console.log(d);
return d; // add value of each inner array as a text in <td>
});
//由以下几句体会数据绑定
var div = d3.selectAll("div")
.data(matrix)
.attr("width", function(d){console.log(this); console.log("current ele data:", d)});
console.log(div);
var p = div.selectAll("p");
p.data(function(d){console.log(this); console.log(d); return d;}).text(function(d){console.log(this); return d;});
</script>
</body>
</html>
685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
