绑定过程

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

<!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. Mybatis学习记录(1)

    1.Mybatis介绍     Mybatis是apache的一个开源项目iBatis,Mybatis是一个优秀的持久层框架,他对jdbc的操作数据库的过程进行封装,使开发者只需要关注sql本身,不需 ...

  2. C#数组排序方法

    在C#中常用的数组排序的方法有:选择排序法.冒泡排序法.插入排序法和希尔排序法等. 一.选择排序法 using System;using System.Collections.Generic;usin ...

  3. oc中将CGRect、CGSize、CGPoint等结构体转换为字符串

    CGRect rect = CGRectMake(160, 230, 200, 200); CGPoint point = CGPointMake(20, 20); CGSize size =  CG ...

  4. iOS开发－动画总结

    一.简介 IOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide.Core Animation是IOS和OS X平台上负责图形渲染与动画的基 ...

  5. Confirm the Ending--freecodecamp算法题目

    Confirm the Ending(检查字符串结尾) 要求 判断一个字符串(str)是否以指定的字符串(target)结尾. 如果是,返回true;如果不是,返回false. 思路 利用.repla ...

  6. java中的jdbc操作

    package demo; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedSta ...

  7. 【Python学习之七】递归——汉诺塔问题的算法理解

    汉诺塔问题 汉诺塔的移动可以用递归函数非常简单地实现.请编写move(n, a, b, c)函数,它接收参数n,表示3个柱子A.B.C中第1个柱子A的盘子数量,然后打印出把所有盘子从A借助B移动到C的 ...

  8. Python爬虫系列-Urllib库详解

    Urllib库详解 Python内置的Http请求库: * urllib.request 请求模块 * urllib.error 异常处理模块 * urllib.parse url解析模块 * url ...

  9. GoF23种设计模式之行为型模式之观察者模式

    一.概述        定义对象之间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.二.适用性1.当一个抽象模型有两个方面,其中一个方面依赖于另一方面的时 ...

  10. UVA - 11054 Wine trading in Gergovia 扫描法

    题目:点击打开题目链接 思路:考虑第一个村庄,如果第一个村庄需要买酒,那么a1>0,那么一定有劳动力从第二个村庄向第一个村庄搬酒,这些酒可能是第二个村庄生产的,也可能是从其他村庄搬过来的,但这一 ...