您的位置: 首页  >  IT文章  >  可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定

可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定

分类: IT文章 • 2023-11-08 16:45:59

　　D3.js 就是在元素选择与元素数据绑定的技术上进行后续操作的，所以元素选择与数据绑定是基础。

1、选择器

d3.select()
d3.selectAll()

介绍下常见用法如下（这里先说下基本用法，第四章会详细介绍）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<h3></h3>
<h4 );
    h3.text('日照香炉生紫烟');
    h4.text('遥看瀑布挂前川');
    author.text('李白');
    date.text('2020-3-26');

</script>
</html>

运行效果：

可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定

说明D3的选择器 跟jquery中的使用一样  这下用起来很顺手

2、数据绑定

　　D3 中是通过以下两个函数来绑定数据的：
　　datum()：绑定一个数据到选择集上
　　data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

首先来看datum()：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datum</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>

</body>

<script>

    var h3 = d3.selectAll('h3');
    h3.datum('我是一只小小小小鸟').text(function (v,i) {
        return '我是第'+ i +'个h3标签，内容是：'+ v;
    })


//    运行结果如下：
//    我是第0个h3标签，内容是：我是一只小小小小鸟
//    我是第1个h3标签，内容是：我是一只小小小小鸟
//    我是第2个h3标签，内容是：我是一只小小小小鸟
//    我是第3个h3标签，内容是：我是一只小小小小鸟

</script>

</html>

然后再看data()：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datum</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>

</body>

<script>

    var lyrics = [
        '我是一只小小小小鸟',
        '想要飞呀飞却飞也飞不高',
        '我寻寻觅觅寻寻觅觅一个温暖的怀抱',
        '这样的要求算不算太高'
    ];
    var h3 = d3.selectAll('h3');
    h3.data(lyrics).text(function (v,i) {
        return '我是第'+ i +'个h3标签，内容是：'+ v;
    })


//    运行结果如下：
//    我是第0个h3标签，内容是：我是一只小小小小鸟
//    我是第1个h3标签，内容是：想要飞呀飞却飞也飞不高
//    我是第2个h3标签，内容是：我寻寻觅觅寻寻觅觅一个温暖的怀抱
//    我是第3个h3标签，内容是：这样的要求算不算太高

</script>

</html>

细细品 能看出差别吧；

data() 中数据与选择集元素是一一对应关系；

datum() 中是数据对应所有（多个）选择集元素；

注意：

h3.datum('我是一只小小小小鸟')，直接绑定的一个字符串数据；

如果是在 h3.data() 方法的例子中 直接绑定一个字符串  那么运行结果就会有点出乎意料，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datum</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>

</body>

<script>

    var h3 = d3.selectAll('h3');
    h3.data('我是一只小小小小鸟').text(function (v,i) {
        return '我是第'+ i +'个h3标签，内容是：'+ v;
    })

//
//    运行结果如下：
//    我是第0个h3标签，内容是：我
//    我是第1个h3标签，内容是：是
//    我是第2个h3标签，内容是：一
//    我是第3个h3标签，内容是：只
//    我是第4个h3标签，内容是：小
//    我是第5个h3标签，内容是：小
//    我是第6个h3标签，内容是：小
//    我是第7个h3标签，内容是：小
//    我是第8个h3标签，内容是：鸟

</script>

</html>

当然 data()方法中 参数还可以是一个 function （） { return array }；但是一定要是有返回值的函数。

 

 


相关推荐