d3笔记（1） - d3元素选择器及数据绑定的理解

以下贴出代码，读者可以通过控制台输出体会选择器和数据绑定。

<!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>

d3笔记（1） - d3元素选择器及数据绑定的理解

猜你喜欢