绑定过程

选择元素，绑定数据，追加元素

<!DOCTYPE html>

<html>

<head>

<title>testD3-.html</title>

<script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>

</head>

<body>

    This is my HTML page. <br>

</body>

<script type="text/javascript">

    var dataset = [ , , , ,  ];

    d3.select("body").selectAll("p")

    .data(dataset)

    .enter()

    .append("p")

    .text("New paragraph!");

</script>

</html>

选中body下面的所有p标签，如果p标签为空，会根据后面绑定的数据添加相应的p标签

.data()将dataset里面的数据和body下面的p标签绑定在一起，dataset有五个值，则数据集执行了五次，生成五个p标签

.enter()将数据传递到dom当中，如果dom数不足，则创建一个占位符

.append(),通过enter()创建的占位符创建元素

.text()分别在新创建的p标签当中插入文字

d3 数据绑定的更多相关文章

  1. D3数据绑定

    这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此. 原文地址 Thinking with Joins Say you’re making a b ...

  2. d3基础入门一-选集、数据绑定等核心概念

    引入D3 D3下载,本文下载时的版本为6.5.0 mkdir d3.6.5.0 unzip --help unzip d3.zip -d d3.6.5.0/ ls d3.6.5.0/ API.md C ...

  3. d3可视化实战02：理解d3数据驱动的真正含义

    前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...

  4. d3.js入门之DOM操作

    上篇成功在vue项目中把d3跑起来了,接下来对d3的基本操作做个汇总: 一.d3元素选择器 d3.select(".skill"):选择第一个类名为skill的元素并返回这个元素对 ...

  5. node+ts的心得与坑

    首先先明确,用node+ts的目的,为什么不ng+ts.这一点后面还会反复提醒自己 node毕竟不是ng. 用node的理由: 处理js,在后端操纵dom,读写类html格式的东西,比直接用py的后端 ...

  6. D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序

    数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...

  7. 一个初学者的指南，使用D3做数据绑定

    一个初学者的指南,使用D3做数据绑定 D3.js 是个强大的数据可视化库,可以做出惊艳的图表.比如:气泡图,线图和条形图--只需要很少行的代码 随着初学者对JavaScript的理解,可以将数组或者对 ...

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

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

  9. d3 data()数据绑定中的key函数

    官网https://github.com/d3/d3-selection/blob/master/README.md#selection_data var data = [ {name: " ...

随机推荐

  1. tcp 高性能服务, netty,mqtt

    1. io 线程不要有比较长的服务. 全部异步化. [1] netty 权威指南上只是说业务复杂时派发到业务线程池种. 共用的线程池最好都轻量. 多层线程池后, 下层的可以进行隔离. 这个是 mqtt ...

  2. MySQL Innodb表空间不足的处理方法

    官方给出的解决方案: 添加和删除 InnoDB 数据和日志文件 这一节描述在InnoDB表空间耗尽空间之时,或者你想要改变日志文件大小之时,你可以做的一些事情. 最简单的,增加InnoDB表空间大小的 ...

  3. 【转】VC自定义消息

    MFC一般可利用ClassWizard类向导添加消息和消息处理函数,但用户自定义消息必须手工输入,现将vc自定义消息方法步骤记录如下: (1)定义消息 利用#define语句直接定义用户自己的消息(既 ...

  4. 【线性基】bzoj2322: [BeiJing2011]梦想封印

    线性基的思维题+图常见套路 Description 渐渐地,Magic Land上的人们对那座岛屿上的各种现象有了深入的了解. 为了分析一种奇特的称为梦想封印(Fantasy Seal)的特技,需要引 ...

  5. Python学习笔记：输入输出，注释，运算符，变量，数字类型，序列，条件和循环控制，函数，迭代器与生成器，异常处理

    输入输出 输入函数input()和raw_input() 在Python3.x中只有input()作为输入函数,会将输入内容自动转换str类型: 在Python2.x中有input()和raw_inp ...

  6. IOC容器和Bean的配置实例

    实验1: <!--实验1:通过IOC容器创建对象,并为属性赋值 --> <!-- 需要由IOC容器创建对象的全类名 --> <!-- 为了便于从IOC容器中获取book对 ...

  7. Erasing and Winning UVA - 11491 贪心

    题目:题目链接 思路:不难发现,要使整体尽量大,应先满足高位尽量大,按这个思路优先满足高位即可 AC代码: #include <iostream> #include <cstdio& ...

  8. 使用sprunge粘贴文字

    在irc里面请教的时候,需要输出很多文本,irc禁止输入多行文字. 使用sprunge可以返回一个网址,省去复制粘贴的麻烦. 1> 简单使用: command | curl -F "s ...

  9. Android Studio中不能显示svn的上传下载两个图标同时version control为灰，不可点击

    最近在接触Android Studio,涉及到svn的配置,因为是先安装的svn,后安装的Android Studio,后边同事告诉我, Android Studio 的SVN安装与其他IDE有很大差 ...

  10. ssl 在nginx上的部署示例

    server { listen 80; listen 443 ssl; server_name           [DOMAIN]; ssl on; ssl_certificate /work/ss ...