d3选择集合核心方法(二)：data与datum

最新推荐文章于 2024-08-22 17:23:17 发布

蚁方阵

最新推荐文章于 2024-08-22 17:23:17 发布

阅读量7.8k

点赞数 1

分类专栏： d3应用专题文章标签： d3 d3应用专题

本文链接：https://blog.csdn.net/yiifaa/article/details/51956092

版权

本文详细探讨了D3选择集合中的关键方法——data和datum，包括它们在集合运算、唯一性识别、清除旧数据、读取和赋值中的应用，并通过实例代码展示了如何进行链式操作和处理空元素。通过学习，读者将能够更好地理解和运用这两个重要方法。

摘要由CSDN通过智能技术生成

表一 d3赋值语句data与datum的区别

特性	datum	data
集合运算	不支持	支持enter、exit函数
唯一性识别	不支持	不支持
旧数据清除	支持	不支持
读取数据	返回集合的第一条数据	返回集合的所有数据
赋值	将集合的每个元素设置为同样的值	集合更新运算，两个集合的交集运算
链式操作	后值总是覆盖前值	不断进行集合的交集运算
对空元素赋值	后续操作无效果	可通过enter添加新元素

实例代码：

假定预置的DOM元素如下：

<li class="list-group-item" id="1"></li>
<li class="list-group-item" id="2"></li>
<li

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蚁方阵

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Datum:一个自以为是的数据绑定库

05-07

（如果您遇到麻烦，jQuery的方法是一个不错的选择。）视图模型是一个JavaScript对象，其中包含将在网页上显示的所有数据以及与网页进行交互的所有逻辑。您可以通过将其传递给名为BindingRoot的构造函数来告诉...

D3.js data() 方法详解

weixin_34064653的博客

12-08

1624

Binding data（数据绑定）　　D3各种图表的作用体现在将数据(Data)转换成可视化的过程。　　比如将一个月的气温数据，通过树形图来展现，能够直观的看到气温走势，下个月还需不需要穿秋裤 :) 　　我们通过D3的 selection.data() 方法来将 data 绑定到 DOM 元素。因此，一个绑定过程的必要条件既是：data 和 DOM目标元素（没有目标元素，你还bind个...

参与评论您还未登录，请先登录后发表或查看评论

【 D3.js 选择集与数据详解 — 1 】使用datum()绑定数据

weixin_30539835的博客

01-12

296

选择集和数据的关系是 D3 最重要的基础，在【入门 - 第 7 章】时进行过些许讲解，对于要掌握好 D3 是远远不够的。故此开设一个新的分类，专门讨论选择集与数据的关系，包括数据绑定的使用和工作原理，update 、enter、exit 的原理和使用方法等，接下来一段时间里会有多篇此类文章。D3 最大的特色就是能够将数据绑定到DOM上。使用select或selectAll选择元素之后，被选择的...

D3js——数据绑定 datum

最新发布

weixin_45705239的博客

08-22

241

在 _plotLine 和 _plotPolygons 函数中绑定 line 或 polygon 对象（包括 visibility_strategy 属性，如果存在的话）到相应的 DOM 元素上，是为了之后能够轻松地在 setStep 函数中获取并使用这些数据来控制元素的可视性。这样做的好处是你可以在随后的操作中访问这些数据，并根据这些数据来操作元素本身，例如设置其样式、位置或其他属性。总之，.datum() 方法让你能够将数据和视觉元素联系起来，并在之后的操作中方便地访问和使用这些数据。

（补充）赶鸭子上架学D3.jsdataenter的（二）---data，datum，update，enter，exit基础概念（b站从零开始画图表学习笔记，感谢up主睿小狼）

weixin_41032724的博客

06-17

650

绑定数据D3.js常用的绑定数据的方法有两种 data和datum从英文单词角度来说是data的附属和date的区别与共同点：都是绑定数据集，但是data是将数组中的每一个元素绑定到svg元素上面，而datum的作用是把数组本身绑定到每个svg元素上面，简而言之，data是一对一，datum是一对多对数据状态的处理d3把数据的状态分为三种形式：数据与元素对应（update）还没有元素但是有数据...

data单复数一样吗_data和datum谁是单数形式，谁是复数形式？

weixin_39889642的博客

12-20

6828

首先，datum 是单数， data是datum的复数形式。(类似 medium 和 media)其次，datum很少被用到了，现在大家往往用data。data是个单数不可数词语。类似sand 和water。以下说明data为什么是单数。在英语学界，关于data是单数还是复数本来就有很多的争议。有些人说data就是复数，而datum是data的单数形式。理由是，像英语中很多词一样，data是从拉丁...

D3 datum&data

Claroja

04-09

2204

data()与datum() 在选择元素后(selcetAll)后,直接调用.data方法绑定数据. data绑定的是数组常用 datum绑定的是一个数,不常用在连缀方法中，只要调用 data() 了，就可以随时创建一个接收 d 为输入的匿名函数。与当前元素对应，方法 data() 确保了每个 d 都会被赋予原始数据集中的一个值。随着 D3 遍历每个元素，“当前元素”的这个值也会跟着...

STM32H743+Keil-将变量定义到指定内存

wallace89的博客

07-05

3747

文章目录一、前言二、Keil2.1、Target2.2、Linker三、代码四、DEBUG 一、前言在STM32CubeIDE实现了将变量定义到指定内存，当使用Keil时，方法又不一样了。 STM32H743+CubeIDE-将变量定义到指定的内存 RAM：0x20000000 ~ 0x20020000 ，尺寸128KB。这个就是DTCM内存。安富莱的建议：二、Keil 2.1、Target 让Keil只管理DTCM内存，不要管理其他内存。 2.2、Linker 从ST官方手册RM0433可以

D3.js实现折线图的方法详解

11-26

在这个框架中，我们为图表预留了空间，并通过 `d3.select` 和 `append` 方法添加了一个SVG容器，然后设置了SVG的宽高以及内部的分组 `g`，用于放置图表元素。接下来，我们需要创建数据集和比例尺。在本例中，我们...

desafio-tecnico：Desafio Tecnico para Datum

02-15

【标题】：“desafio-tecnico：Desafio Tecnico para Datum” 在这个技术挑战中，我们关注的是“desafio-tecnico”，这显然是一项技术测试，可能是针对潜在求职者或者开发者社区的一个项目。"Datum"很可能是一家...

d3地图：d3地图

02-13

.datum(function(d) { return {id: d.id, value: data[d.id]}; }) .style("fill", function(d) { return color(d.value); }); ``` ### 7. 提供自定义数据将自定义数据与地图区域关联起来，可以显示更丰富的信息...

d3选择集合核心方法二 data与datum

qq_44884577的博客

04-20

904

d3选择集合核心方法二 data与datum

TCM SRAM等五块内存的使用和动态分配

yybyg的博客

04-12

390

【代码】TCM SRAM等五块内存的使用和动态分配。

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

weixin_30480583的博客

04-18

191

原文链接： http://d3.decembercafe.org/pages/lessons/3.html 解析一下data和datum原理： datum()：绑定一个数据到选择集上 data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定 <!DOCTYPE html><html><head> &...

stm32h7内存分配_【STM32H7教程】第26章 STM32H7的TCM，SRAM等内存的使用方式

weixin_39611208的博客

12-19

1371

26.1 初学者重要提示学习本章节前，务必优先学习第25章，了解TCM，SRAM等五块内存区的基础知识，比较重要。本章的管理方式比较容易实现，仅需添加一个分散加载文件即可，对应的分散加载内容也比较好理解。26.2 MDK分散加载方式管理多块内存区方法默认情况下，我们都是通过MDK的option选项设置Flash和RAM大小：这种情况下，所有管理工作都是编译来处理的。针对这个配置，在路径Projec...

stm32h7内存分配_stm32h7“分散加载方式管理多块内存”

weixin_39719472的博客

12-19

1156

默认情况下，我们都是通过 MDK 的 option 选项设置 Flash 和 RAM 大小，如图1图1这种情况下，不方便用户将变量定义到指定的 CCM 或者 SDRAM 中。而使用attribute指定具体地址又不方便管理。默认设置下编译工程完成后，会在文件夹【Objects】(本工程的路径)中会自动生成一个后缀为.sct的文件【output.sct】,如图2图2打开自动生成的文件【output....

关于__CC_ARM 与 __ICCARM__与内存保护

yushiqian2012的专栏

03-09

1100

elif defined (__ICCARM__) //针对的是IAR的编译环境。#if defined ( __CC_ARM ) //针对的是MDK的编译环境。

d3设置line长度_使用d3画一些基本的图形

weixin_34039159的博客

12-24

914

生成图标需要有四个步骤1生成图片容器2设置比例尺3生成数据图表4生成坐标系在展示图表时一般要有个容器，我们可以使用.container 类，同时制定宽高。如下:可以加个样式#container{width:600px;height:400px;background:#ccc;}引入d3.min.js文件var width=600,height=400 //设置svg的宽和高var margin={...

D3.js中文API教程：选择集与数据绑定详解

D3.js的核心功能之一是选择和操作DOM元素。`d3.select`用于选取文档中的单个元素，而`d3.selectAll`则用于选取一组元素。这两个函数极大地简化了对DOM的操作。 2. **属性和样式** - `selection.attr`: 设置或获取...