D3入门教程——选择数据和数据绑定

最新推荐文章于 2022-09-16 11:34:49 发布

我是大魔王2

最新推荐文章于 2022-09-16 11:34:49 发布

阅读量1.1k

点赞数 1

分类专栏： D3入门教程文章标签： D3入门教程

本文链接：https://blog.csdn.net/mylovewanzi/article/details/99696506

版权

D3入门教程专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

一、如何选择元素
二、如何绑定元素
- 1.datum()
- 2.data()

一、如何选择元素

d3.select()：是选择所有指定元素的第一个
d3.selectAll()：是选择指定元素的全部

例如：

var body = d3.select("body"); //选择文档中的body元素
var p1 = body.select("p");      //选择body中的第一个p元素
var p = body.selectAll("p");    //选择body中的所有p元素
var svg = body.select("svg");   //选择body中的svg元素
var rects = svg.selectAll("rect");  //选择svg中所有的svg元素

二、如何绑定元素

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

1.datum()

绑定一个数据到选择集上。

代码：

<!DOCTYPE html>
<html lang="en">

<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 type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
</head>

<body>
    <p>dog</p>
    <p>cat</p>
    <p>pig</p>

    <!--  
            可以发现，本段代码的作用是将str这个字符串绑定代三个<p>选择集上，
            然后通过一个无名函数function(d,i)，访问到绑定的元素。
            （function(d,i)，这样的函数后面会经常出现，其中d代表数据，
            也就是与某元素绑定的数据，i代表索引，代表数据的索引，从0开始） -->
    <script>
        var str = "is an animal";//新建一个字符串
        var p = d3.select("body")
            .selectAll("p");

        p.datum(str)//绑定
            .text(function (d, i) {
                return "第" + i + "个元素" + d;
            });
    </script>
</body>

</html>

运行结果：

在这里插入图片描述

2.data()

绑定一个数组到选择集上。

代码：

<!DOCTYPE html>
<html lang="en">

<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 type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
</head>

<body>
    <p>dog</p>
    <p>cat</p>
    <p>pig</p>

    <script>
        var dataset = ["so cute", "cute", "fat"];
        var p = d3.select("body")
            .selectAll("p");

        p.data(dataset)
            .text(function (d, i) {
                return "第" + i + "个动物" + d;
            });
    </script>
</body>

</html>

运行结果：
在这里插入图片描述

时间：2019年8月18日11:27:08

-END-

我是大魔王2

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
D3入门教程——选择数据和数据绑定

文章目录一、如何选择元素二、如何绑定元素1.datum()一、如何选择元素d3.select()：是选择所有指定元素的第一个d3.selectAll()：是选择指定元素的全部例如：var body = d3.select("body"); //选择文档中的body元素var p1 = body.select("p"); //选择body中的第一个p元素var p = ...
复制链接

扫一扫