绑定过程

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

<!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. 超全面Java 面试题（2.1）

    这部分主要是开源JavaEE框架方面的内容,包括hibernate.MyBatis.spring.Spring MVC等,由于Struts2已经是明日黄花,在这里就不讨论Struts2的面试题,此外, ...

  2. Python——数据类型

    如果是C语言,Java使用一个变量之前需要声明,数字,字符,布尔等都有特定的声明方式,前端中常用的js中都要使用var,而python中直接用就行了 比如: 虽然是这样使用,但其实是当你给一个变量赋值 ...

  3. cin 和 getline 混用中需要注意的问题

    这段时间在刷题过程中遇到一个cin和getline混合使用中的问题,解决之后记录如下: 先来看一段代码 #include <iostream> #include <string> ...

  4. destoon修改手机端分页

    1. global.func.php pages函数和listpages函数 函数开头增加 $DT_TOUCH,$newsamplepages变量 global $DT_URL, $DT, $L,$D ...

  5. DeepFaceLab小白入门（4）：提取人脸图片！

    通过上面级片文章,你应该基本知道了换脸的流出,也能换出一个视频来.此时,你可能会产生好多疑问,比如每个环节点点到底是什么意思,那些黑漆漆屏幕输出的又是什么内容,我换脸效果这么差,该如何提升?等等,好奇 ...

  6. python导出开发环境

    1.导出开发环境的依赖包 本地开发完后,再把代码给别人之前,需要 pip freeze > pip123.txt 2.其他环境安装依赖包 pip install -r pip123.txt 其他 ...

  7. pandas时间数据的集成处理

    工作中遇到的一个问题: 统计各地区新能源汽车的充电时长 数据来源是北理新源的单日全球的运行数据. 这里仅统计北上广重庆四个地区的 数据处理的代码就省略了 需要整理好的是4个dataframe(数据已保 ...

  8. MYSQL安装与库的基本操作

    mysql数据库 什么是数据库 # 用来存储数据的仓库 # 数据库可以在硬盘及内存中存储数据 数据库与文件存储数据区别 数据库本质也是通过文件来存储数据, 数据库的概念就是系统的管理存储数据的文件 数 ...

  9. leetcode-26-exercise_linked-list

    141. Linked List Cycle Given a linked list, determine if it has a cycle in it. 解题思路: 需要检查before和afte ...

  10. German Collegiate Programming Contest 2015 计蒜课

    // Change of Scenery 1 #include <iostream> #include <cstdio> #include <algorithm> ...