d3.js 之关联数据:data操作符

页面导航:首页 > 网络编程 > JavaScript > d3.js 之关联数据:data操作符

d3.js 之关联数据:data操作符

来源: 作者: 时间:2016-02-02 09:59 【

数据集:使用简单数组在d3中,数据集是使用数组 array来指定的。最简单的数组是一组数值,比如:[12 34,27 29,29 39,12 38]。这些数值 可以直接映射成可视化元素的一个属性值(或许需要一
数据集:使用简单数组
在d3中,数据集是使用数组/array来指定的。
 
最简单的数组是一组数值,比如:[12.34,27.29,29.39,12.38]。这些数值 可以直接映射成可视化元素的一个属性值(或许需要一些必要的比例缩放, 以便能看得清楚)。
 
经常用来映射数值的可视化元素的属性包括:
 
坐标位置:对于HTML元素来讲,就是left、top属性
宽度:对于HTML元素来讲,就是width属性
高度:对于HTML元素来讲,就是height属性。
背景颜色:比如,数值越小,颜色越浅。
字体颜色
字体大写
....
这依赖于你的想象力。
 
数据集:使用对象数组
在实际的应用场景中,数据集中的每一项通常对应着一个业务模型对象,不会只是 一个简单的数值,而是一个有众多属性的JSON对象:
 
var repo = [
{
name : "Zhang San",
gender : "Male",
age : 28,
friends : [...]
},
...
]
但这对于d3不是什么难事,一早提到的访问器函数的作用就体现在这个地方: d3虽然管理DOM元素和数据对象的映射关系,但它并不直接访问数据, 而是通过我们提供的访问器接口才访问数据!
 
这样的好处是,d3不需要对数据结构进行严格地限制了,每当它 需要访问数据,总是把DOM元素对应的数据传递给我们提供的访问器 函数,由我们负责解析,它只要结果。
 
数据集:使用数据函数
data()操作符会对传入的参数类型进行判断,如果是一个函数,它就会 执行这个函数,并且使用其返回值(注意:这个函数的返回值必须是一个数组) 作为数据集。
 
在有些应用场景下,这个功能很实用。比如,你了解数据的生成模式,只需要 一个公式就能产生出大量的数据;或者,你就是像我一样,为了展示一下这个 功能...
 
 代码生成了一些随机数据,具有如下的结构:
 
{
x: <随机数>
y: <随机数>
value: <随机数>
}
我们在示例中很直白地将数据的x值映射为DIV元素的left属性,y值映射为DIV元素 的top属性,并在每个DIV中显示value。
 
每次要将一组数据进行可视化,总有这样一个设计过程。d3简化了从数据变换到图形 的工作,但是,思想,还是来源于我们自己。 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<