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

最新推荐文章于 2023-07-16 16:22:37 发布

borenliang

最新推荐文章于 2023-07-16 16:22:37 发布

阅读量489

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/BoRenLiang/article/details/85543605

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文通过实例展示了如何使用D3.js进行数据绑定和元素选择，深入理解D3.js如何操作DOM元素，将数据与视图绑定，实现动态更新。代码示例包括表格创建、数据填充以及控制台输出，帮助读者掌握D3.js的核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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