d3.js中选择元素和绑定数据

回顾一下如何选择元素

在 D3 中，用于选择元素的函数有两个：

d3.select()：是选择所有指定元素的第一个
d3.selectAll()：是选择指定元素的全部

这两个函数返回的结果称为选择集。

如何绑定数据

D3 有一个很独特的功能：能将数据绑定到 DOM 上，也就是绑定到文档上。这么说可能不好理解，例如网页中有段落元素 p 和一个整数 5，于是可以将整数 5 与 p 绑定到一起。绑定之后，当需要依靠这个数据才操作元素的时候，会很方便。

D3 中是通过以下两个函数来绑定数据的：

datum()：绑定一个数据到选择集上
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

相对而言，data() 比较常用。

直接看demo:

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script src="../libs/d3.min.js" charset="utf-8"></script>
</head>
<body>
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
</body>
</html><script>/*
   var str = "china";

   var body = d3.select("body");
   var p = body.selectAll("p");
   p.datum(str);
   p.style("color","red")
           .style("font-size","72px");
   p.text(function(d, i){
       return "第 "+ i + " 个元素绑定的数据是 " + d;
   });
   */

   var dataset = ["I like dog","I like cat","I like snake"];var body = d3.select("body");var p = body.selectAll("p");p.data(dataset).text(function(d, i){return d;});p.style("color","red").style("font-size","72px");
</script>

d3.js中选择元素和绑定数据相关推荐

D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
[译] D3.js 嵌套选择集 (Nested Selection)
译者注: 原文: Mike Bostock (D3.js 作者) -- Nested Selections 译者: ssthouse 本文讲解的是关于 D3.js 中 d3-selection 的使用 ...
力引导算法深入理解及其在d3.js中实现的源码分析
中学时最喜欢的学科是物理,大学误打误撞读了计算机.最近在做图计算的相关工作,图的可视化中有一个非常重要的算法:"力引导算法",这个算法的原理居然就是最简单的粒子间的作用力,真是没想 ...
【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
如何在组件模板中选择元素？
本文翻译自:How can I select an element in a component template? Does anybody know how to get hold of an e ...
d3.js中svg的下载
svg下载分两种,一种下载带缩放的,一种是下载不带缩放的: 例如有一个缩放后的svg长这样: 如果下载带缩放的,下载结果如下: 如果无视缩放,下载整个svg,那么结果如下: 更多细节请参考文章: d3 ...
d3.js中的选择元素
在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部这两个函数返回的结果称为选择集. 怎么使用这2个函数呢 ...
D3.js 中Bubble Chart详解
Bubble Chart 今天来聊一聊美丽浪漫的气泡图~ 气泡图是一种显示三维数据的图表. 每个具有相关数据的三元组(v1,v2,v3)的实体都被绘制成一个气泡,它通过气泡的x,y位置表示了三元组中的 ...
D3.js中Bullet Charts详解
Bullet Charts 今天我们来聊一聊占地儿小却能表达足够丰富的数据信息的子弹图. 子弹图,顾名思义是由于该类信息图的样子很像子弹射出后带出的轨道.子弹图无修饰的线性表达方式使我们能够在狭小的 ...

d3.js中选择元素和绑定数据

回顾一下如何选择元素

如何绑定数据

d3.js中选择元素和绑定数据相关推荐

最新文章

热门文章