d3 数据绑定

绑定过程

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

<!DOCTYPE html>
<html>
<head>
<title>testD3-1.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 = [ 5, 10, 15, 20, 25 ];

    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标签当中插入文字

时间: 2024-08-07 08:27:41

d3 数据绑定的相关文章

D3数据绑定

这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此. 原文地址 Thinking with Joins Say you’re making a basic scatterplot using D3, and you need to create some SVG circle elements to visualize your data. You may be surprised to discover that D3 has no pri

D3数据绑定的datum和data方法

这两个差别,一目了然. <!DOCTYPE html> <body> <div id="datum"> <p>Fire</p> <p>Water</p> <p>Wind</p> </div> <div id="data"> <p>Lion</p> <p>Tiger</p> <p>

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

前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口再进行直接控制的js类库,如 Raphaël.但是正如我在第一篇文章中所说,d3作为一个中间型类库还能脱颖而出的重要原因,在于它突破了其他类库的那种直接控制表现层的机制,而采用了对于web图形处理领域较为新颖的数据驱动机制(2011),并获得了极大的成功. 数据驱动的历史 数据驱动编程并不是一个新鲜

d3.js入门之DOM操作

上篇成功在vue项目中把d3跑起来了,接下来对d3的基本操作做个汇总: 一.d3元素选择器 d3.select(".skill"):选择第一个类名为skill的元素并返回这个元素对象(实现链式语法) d3.selectAll("p"):选择所有的p标签并返回这些元素对象(实现链式语法) d3.select(".skill").select("p"):选择第一个类名为skill元素下的所有p标签 二.d3数据绑定 这里是通过da

进口货规范的地方规划局可

http://www.gettyimages.cn/newsr.php?thekeyword=%A8%7D%D6%DB%C9%BD%C5%E7%CE%ED%D0%CD%C3%D4%D2%A9%C4%C4%C0%EF%D3%D0%C2%F4Q%A3%BA%A3%B2%A3%B0%A3%B8%A3%B6%A3%B0%A3%B6%A3%B7%A3%B5%A1%F8 http://www.gettyimages.cn/newsr.php?thekeyword=%A8%8E%CC%A8%D6%DD%C5%

女宇航员奶奶家

http://shike.gaotie.cn/zhan.asp?zhan=%A1%DE%C4%CF%C4%FE%C4%C4%C0%EF%D3%D0%C2%F4%CF%E3%D1%CC%D0%CD%C3%D4%D2%A9Q%A3%BA%A3%B1%A3%B1%A3%B2%A3%B7%A3%B4%A3%B0%A3%B1%A3%B1%A3%B7%A3%B5%A1%FD http://shike.gaotie.cn/zhan.asp?zhan=%A6%E6%C1%F8%D6%DD%C4%C4%C0%EF

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

一个初学者的指南,使用D3做数据绑定 D3.js 是个强大的数据可视化库,可以做出惊艳的图表.比如:气泡图,线图和条形图--只需要很少行的代码 随着初学者对JavaScript的理解,可以将数组或者对象转换成一个五彩缤纷的显示效果.然而,每一个初学者的比较纠结的是一开始理解如何将数据绑定在实际的DOM元素上.这就是我们所知道的“数据绑定”或者叫“数据连接”.这是一个重要的处理,因为这个整个过程的第一步! 非常直观的,你可能希望使用一个 for() 循环,循环每一项数据并且创建一个元素,像这样:

D3入门系列(1)--元素选择、增删与数据绑定的基本用法

使用D3 在网页中使用D3有两种方法: 1. 下载D3.js文件后本地引用 下载地址  https://github.com/mbostock/d3/releases/download/v3.4.8/d3.zip 2. 在线引用 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 第一个程序:Hello World 1 <!DOCTYPE html&g

D3制作基础图表学习总结(part1)

一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki  二.建立图表 1.线性图表: 画线条的思路(下面代码都在js文件中编写,并在htm文件中引入自己写的该js文件): 1)设置存放曲线的位置 给html文件中的container容器添加节点svg,并为svg节点设置宽.高. 在svg节点中添加一个g节点(存放线条)并设置其位置(用了css3中的位移属性). 2)画