原文链接：

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="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>

　　在打印的时候发现每个p元素的属性中会多一个__data__,对应的数据就绑定在此属性上。

datum()会把值绑定在__data__属性上，所有元素的值都相同；

data()会把数组对象对应赋值到元素上，如果数值不够则此元素的text为空。

d3.js--02（data和datum原理）的更多相关文章

  1. D3.js学习笔记（一）——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

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

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

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

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  4. D3.js & Data Visualization & SVG

    D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...

  5. Data Visualization and D3.js 笔记(1)

    课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...

  6. D3.js data() 方法详解

    Binding data(数据绑定) D3各种图表的作用体现在将数据(Data)转换成可视化的过程. 比如将一个月的气温数据,通过树形图来展现,能够直观的看到气温走势,下个月还需不需要穿秋裤 :) 我 ...

  7. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  8. d3.js <一>

    <html> <head> <meta charset="utf-8"> <title>HelloWorld</title&g ...

  9. 【 D3.js 进阶系列 】 进阶总结

    进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...

随机推荐

  1. mysql--浅谈子查询1

    这是对自己学习燕十八老师mysql教程的总结,非常感谢燕十八老师. 依赖软件:mysql5.6 系统环境:win 子查询概念 子查询就是在原有的查询语句中嵌入新的查询 子查询分类 1.where型子查 ...

  2. [題解]（函數下整點個數？）luogu_P4132_BZOJ_2659_算不出的等式

    兩個都是一次函數,下取整就是整點個數,兩個函數k剛好成倒數,所以最後發現會組合成一個矩形 (為啥要考慮重複與否的問題???) 然而這樣會不會重複計算點數呢 我們發現因為取的是圖像下的整數點 所以要想重 ...

  3. Python集合的常用操作

    字典常用的就是,他的去重. set集合是python的一个基本数据类型. set中的元素是不重复的.⽆无序的.⾥面的元素必须是可hash的(int, str, tuple,bool). 我们可以这样来 ...

  4. BZOJ 1433 && Luogu P2055 [ZJOI2009]假期的宿舍 匈牙利算法

    刚学了匈牙利正好练练手(我不会说一开始我写错了)(怕不是寒假就讲了可是我不会) 把人看做左部点,床看作右部点 建图:(!!在校相当于有床,不在校相当于没有床 但是要来学校) 1.在校的 不走的人 自己 ...

  5. 长春理工大学第十四届程序设计竞赛（重现赛）H.Arithmetic Sequence

    题意: 数竞选手小r最喜欢做的题型是数列大题,并且每一道都能得到满分. 你可能不相信,但其实他发现了一个结论:只要是数列,无论是给了通项还是给了递推式,无论定义多复杂,都可以被搞成等差数列.这样,只要 ...

  6. 2017百度之星程序设计大赛 - 复赛 Arithmetic of Bomb

    http://acm.hdu.edu.cn/showproblem.php?pid=6144 解法:一个简单的模拟 #include <bits/stdc++.h> using names ...

  7. .NET Core中Circuit Breaker

    谈谈Circuit Breaker在.NET Core中的简单应用 前言 由于微服务的盛行,不少公司都将原来细粒度比较大的服务拆分成多个小的服务,让每个小服务做好自己的事即可. 经过拆分之后,就避免不 ...

  8. CSS——制作天天生鲜主页

    终于做好了! index.html: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. Oracle更新表字段时内容中含有特殊字符&的解决方法

    今天在做 Oracle表字段更新时出现了特殊字符&,导致无法更新. 这个问题是第二次碰到了,所以在此记录下,以备后用. 举例: update t set col1='A&B' wher ...

  10. Storm编程入门API系列之Storm的Topology的stream grouping

    概念,见博客 Storm概念学习系列之stream grouping(流分组) Storm的stream grouping的Shuffle Grouping 它是随机分组,随机派发stream里面的t ...