d3.js--02（data和datum原理）

首页 > 代码库 > d3.js--02（data和datum原理）

d3.js--02（data和datum原理）

2024-09-15 19:11:42 217人阅读

原文链接：

http://d3.decembercafe.org/pages/lessons/3.html

解析一下data和datum原理：

datum()：绑定一个数据到选择集上
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据绑定</title>
    <script src="http://www.mamicode.com/d3.js"></script>
</head>
<body>
    
<p>apple</p>
<p>organge</p>
<p>banaer</p>
<span></span>
<span></span>
<span></span>


    <script>
        //datum()
        var str = ‘ccz‘;
        var body = d3.select(‘body‘);
        var p = body.selectAll(‘p‘);
        p.datum(str);
        console.log(p);

        p.text(function (d,i) {
            return ‘第‘+i+‘绑定的元素是‘+d;
        })
        //data()
        var obj = [‘like1‘,‘like2‘];
        var span = body.selectAll(‘span‘);
        span.data(obj);
        console.log(span);
        p.text(function (d,i) {
                return d;
            })



    </script>
</body>
</html>