可视化工具D3.js教程 入门 (第二章)—— 选择元素与数据绑定_viceen的博客-程序员秘密

技术标签: 可视化  html5  jquery  javascript  

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

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 id="h4"></h4>
    <h3 title="author"></h3>
    <h3 class="date"></h3>

</body>
<script>

    var h3 = d3.select("body").selectAll("h3");
    var h4 = d3.select("h4");
    var author = d3.select("[title='author']");
    var date = d3.select(".date");
    h3.text('窗前明月光');
    h4.text('疑似地上霜');
    author.text('测试');
    date.text('2021-06-16');

</script>

</html>
效果1

在这里插入图片描述

说明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>
效果1

在这里插入图片描述

然后再看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>
效果2

在这里插入图片描述

两者差别:

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>
效果3

在这里插入图片描述

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44867717/article/details/120417130

智能推荐

webrtc远程控制系统源码学习笔记_服务端(一)_weixin_45948260的博客-程序员秘密

webrtc远程控制系统源码学习笔记_服务端(一)1、main.gofunc main() { router := gin.Default() //使用默认中间件创建一个gin路由器,返回engine对象 router.Use(Cors())//添加自定义的中间件Cors,用于解决跨域问题 router.LoadHTMLGlob("templates/*")// 加载templates文件夹下所有的文件 router.Static("/public/img/", "./public/img/")

如何在小内存主机上搭建博客_「已注销」的博客-程序员秘密

内存和储存极小的情况我推荐你使用 https://github.com/dylanbai8/Onekey_Caddy_PHP7_Sqlite3这个仓库中有一键搭建环境和程序的脚本,不仅支持zblog ,wordpress ,typecho ,还支持了其他文件管理程序和笔记程序等。并且还提供了整机备份的脚本。但是你需要在debian 8+ 的vps上去运行,不支持centos另外caddy伪静态的配置nano /etc/dylanbai8/caddy/Caddyfile然后在第一个和第二个(如果

权限开发手册,数据权限和接口权限配置_清如许.的博客-程序员秘密_接口权限

权限开发手册一般来说,权限有许多种,我们经常用到的一般有操作权限和数据权限两种。功能权限所谓操作权限就是有或者没有做某种操作的权限,具体表现形式就是你看不到某个菜单或按钮,当然也有的是把菜单或按钮灰掉的形式。操作权限一般都在显示界面做一次控制,过滤没有权限的操作菜单或按钮,另外在真正执行操作时,还要进行一次权限检查,确保控制非授权访问。操作权限都是围绕角色来开展的,目的就是要实现操作的角色化。功能权限控制在上图所示的ER图关系中,角色(blade_role)菜单表(blade_menu)通过 角色

iOS NSURLConnection使用详解_diaomu2002的博客-程序员秘密

一、整体介绍NSURLConnection是苹果提供的原生网络访问类,但是苹果很快会将其废弃,且由NSURLSession(iOS7以后)来替代。目前使用最广泛的第三方网络框架AFNetworking最新版本已弃用了NSURLConnection,那我们学习它还有什么用呢?首先,苹果弃用它还是需要时间的,最起码到iOS10之后;现在还有一些老项目会使用NSURLConne...

『iOS开发』iOS 签名机制_Mr黄黄黄黄黄先森的博客-程序员秘密_ios签名机制

iOS 签名机制对称加密(Symmetric Cryptography)对称加密指的是发送端和接收端使用同一种算法对 明文(Plain Text) 进行 加密(Encrypt) 或对 密文(Cipher Text) 进行 解密(Decrypt)发送方先将将要发送的 明文 消息使用加密算法加密为 密文,然后将 密文 通过网络发送至接收方。接收方在收到消息后,使用同一算法对 密文 内容进行解密,即将内容解密为 明文,这种情况下可以避免消息的直接明文传输,具有一定的安全性。加密解密使用的特定算法,我们

统计学基础知识梳理,看这一篇就够了_蓬莱小课IT的博客-程序员秘密_统计学基础知识

数据分析入门要具备什么样的能力?其中有一项必备的——统计学知识,统计学是一种利用数学理论来进行数据分析的技术,通过统计学我们可以用更富有信息驱动力和针对性的方式对数据进行操作。在数据分析工作中,利用统计学,我们可以更深入、更细致地观察数据是如何进行精确组织的,并且基于这种组织结构确定数据分析的方法,来获取更多的信息。今天小编就给大家分享一篇统计学基础知识梳理,希望对大家有帮助。简单而言,描述性统计分析是用几个关键的数字来描述数据集的整体情况&lt;集中性和离散型(波动性大小)&gt;

随便推点

程序员可以自己写测试?还需要测试人员吗?_weixin_33738578的博客-程序员秘密

在向开发人员介绍单元测试或TDD等工程实践时,往往可以听到这样的疑问。比如:自己写的程序,自己无法从另一个角度测出问题。写bug的时间都不够了,哪有时间来写测试?开发来写测试了,测试干什么?除了核心的代码,没有什么值得测试的。……本篇想要通过探讨这些问题背后的困难,来说明程序员怎样通过编写自测代码更有效率的进行开发。一个例子首先我们看一个例子。全项目唯一的测试不止一次,我在各种项目中看到...

Git 如何修改提交日期和作者日期_嘉禾天成的博客-程序员秘密_github修改提交时间

首先区别两者概念:提交日期:作者日期:现在我们要修改该节点(红框框中的节点)的提交日期,首先,复制前一节点的commit ID,然后使用git rebase -i "commit id"然后出现如下信息将“pick” 改为“e”然后保存并退出编辑器然后出现如下信息然后使用以下命令GIT_COMMITTER_DATE="2021-02-04T09:51:07" git commit --amend --date="2021-02-04T09:51:07"

ArcGis学习笔记_canmap的博客-程序员秘密

开始学习Arcgis,虽然出身GIS专业,但已多年没有从事GIS领域的相关工作。刚参加工作时一直使用中地的MapGIS,那时对MapGis各项功能都比较熟悉,经常给别人做一些培训及技术支持的工作。后来从事了汽车导航相关研发工作,随着BAT公司对导航领域的推进,这个行业已经没有太多的机会。看来还要回归到老本行的GIS领域。重新开始学习ArcGis。

Java设计模式----------原型模式_Chen_jay_的博客-程序员秘密

1、介绍原型模式是一种创建型的设计模式,主要的特点是通过克隆已有的对象来进行创建,而不需要通过new操作(甚至是一项一项的设置属性)来实现。原型模式特别适合于构造对象成本较大的场景或者对性能要求较高的场景。主要解决:在运行期建立对象。使用场景:对象的构造过程比较复杂,成本较高。对性能要求比较高的场景。关键技术:实现Cloneable接口,定义clone方法。注意事项: 1. 原型模式属于浅拷贝,只...

雄迈云台摄像机开箱评测:科技感+个性外观,彰显智能生活品质_qq_41799608的博客-程序员秘密

随着科技的进步、网络的普及,以及生活水平的提高和家庭信息化的迅猛发展,人们对家庭安全防范的意识逐渐增强,安全防护越来越受到重视,家庭安全需求和监控需求日渐凸显。与此同时,信息技术的发展使得曾经安装特别复杂的监控设备操作越来越简单化、居家化,所以以家庭安防为主的家庭摄像机逐渐走进了寻常百姓家,成为家庭安防必备品之一。今天就与大家分享一款最新家庭安防产品---雄迈云台摄像机。 这款雄迈云台摄像机是由杭...

【力扣每日一题】每日一题Python代码详解【持续更新】_假如HH的博客-程序员秘密_力扣每题自带的代码是什么

861.翻转后矩阵的得分(12.7日)代码详解如下:class Solution(object): def matrixScore(self, A): """ :type A: List[List[int]] :rtype: int """ m = len(A) #行数 n = len(A[0]) #列数 # 第一步,先将二维列表第一列数值不是1的行进行行变化,将第

推荐文章

热门文章

相关标签