绑定过程

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

<!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. 关于"动态语言" "静态语言" "静态类型语言" "动态类型语言"的区别

    参考链接:关于“编译型”“解释型”“动态语言”“静态语言”“动态类型语言”“静态类型语言”的区分以及优缺点(汇总整理) 很多人把这两类混为一谈,但是这是完全不同的两个概念!!! 动态和静态语言主要看的 ...

  2. ajax的序列化表单提交

    通过传统的 form 表单提交的方式上传文件 ? 1 2 3 4 <form id="uploadForm" action="" method=" ...

  3. bootstrap 警告(Alerts)

    本章将讲解警告(Alerts)以及bootstrap所提供的用于警告的class类.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添 ...

  4. Bootstrap历练实例：默认的缩略图

    本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本.Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下: 1.在图像的周围 ...

  5. 怎样将Oracle数据库设置为归档模式及非归档模式

    怎样将Oracle数据库设置为归档模式及非归档模式 1.Oracle日志分类 分三大类: Alert log files--警报日志,Trace files--跟踪日志(用户和进程)和 redo lo ...

  6. APP上线碰到的问题：Non-public API usage

    ①.Non-public API usage:The app references non-public symbols in XXXX: _UICreateCGImageFromIOSurface ...

  7. 前端应该如何去认识http

    大家应该都知道http是什么吧,肯定会回答不就是浏览器地址那东西吗,有啥好说的,接下来咱们来深入刨析下http这东西. 什么叫http:超文本传输协议(HTTP)是用于传输诸如HTML的超媒体文档的应 ...

  8. k8s的资源限制及资源请求

    容器的资源需求及限制:  需求:requests   ##定义容器运行时至少需要资源  限制:limits     ##定义容器运行时最多能分配的资源    requests:pod.spec.con ...

  9. 如何用纯 CSS 创作一个行驶中的火车 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 ...

  10. Huawei warns against 'Berlin Wall' in digital world

    From China Daily Huawei technologies criticized recent registration imposed on the Chinese tech comp ...