绑定过程

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

<!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. javaweb基础(14)_jsp的原理

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...

  2. on() 和 click() 的区别

    on() 和 click() 的区别: 二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中. 以下实例中原先的 HTML 元素点击其身后的 Delete ...

  3. 27. Remove Element@python

    Given an array nums and a value val, remove all instances of that value in-place and return the new ...

  4. 【卡常 bitset 分块】loj#6499. 「雅礼集训 2018 Day2」颜色

    好不容易算着块大小,裸的分块才能过随机极限数据:然而这题在线的数据都竟然是构造的…… 题目描述 有 $n$ 个数字,第 $i$ 个数字为 $a_i$. 有 $m$ 次询问,每次给出 $k_i$ 个区间 ...

  5. WCF_基础学习

    1.https://www.cnblogs.com/swjian/p/8126202.html 2.https://www.cnblogs.com/dotnet261010/p/7407444.htm ...

  6. 【Ubuntu】ubuntu基本操作命令

    本文主要是用于记录ubuntu中会使用到的命令,但是有不是特别常用的,用于自己后续查阅使用. 1.查询ubuntu版本信息 方法一: cat /etc/issue 方法二: sudo lsb_rele ...

  7. python入门：最基本的用户登录用户登录，三次错误机会

    #!/usr/bin/env python # -*- coding:utf-8 -*- #用户登录,三次错误机会 """ 导入getpass,给x赋值为1,while真 ...

  8. paper:synthesizable finit state machine design techniques using the new systemverilog 3.0 enhancements之fsm summary

    主要是1.不要用1段式写FSM 2.不要用状态编码写one-hot FSM ,要用索引编码写one-hot FSM.

  9. Word 借助VBA一键实现插入交叉引用

    最近写论文的时候,经常需要向上或向下插入题注的交叉引用,word 自带的界面往往需要操作多次,才能实现插入.而平时使用较多的只是交叉引用附近的题注,比如如图1.1所示,在图1.1中等,距离较远的引用则 ...

  10. Django之cookie、session

    会话跟踪技术 可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应. 一次会话过程中,我们应该注意的是什么呢? 那就是,一些操作要保证用户操作的是用户自己个人的数据.举个 ...