d3(二)
来源:互联网 发布:linux 批量删除 编辑:程序博客网 时间:2024/06/05 02:11
原文链接 http://alignedleft.com/tutorials/d3/
应该是这本书
解答我很多关于d3机理的困惑
然后是07 Using your data
1、Using your data
代码
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d){ return d; });
和06的代码比仅仅最后一行代码换了
这里令人困惑的是function(d)的参数d。只要在链条上使用了 data()
函数,之后任何时候都可以创建一个把d作为输入的无名函数。 data()
函数会确保d的值被设置成原有dataset中对应的值,给予当前最近的元素。
当前元素的值会随着D3循环每个元素而变化。举个例子:当循环到第3次,我们的代码会创建第3个p标签,而d将会对应dataset中的第3个值(
dataset[2]
)。所以第3个p的text获得赋值15.
2、数据必须被持有
这个参数d只能通过无名函数传参的形式获得,此外的形式是无效的,比如
.text("I can count up to " + d);
这样行不通。
这样规定语法的原因是text()
, attr()
,和许多其他方法会采用一个函数作为一个参数。
比如,text()
即可以使用一个静态字符文本作文参数:
.text("someString")
也可以使用一个函数:
.text(someFunction())
或者一个匿名函数本事也可以是一个参数,比如:
.text(function(d) { return d;})
Above, you are defining an anonymous function. If D3 sees a function there, it willcall that function, while handing off the current datum
d
as the function’s argument. Without the function in place, D3 can’t know to whom it should hand off the argumentd
.At first, this may seem silly and like a lot of extra work to just get at
d
, but the value of this approach will become clear as we work on more complex pieces.
在前面,你定义了一个匿名函数。如果D3看到那里有一个函数,它会调用那个函数,同时传递了当前的数据d作为函数的参数。如果那里没有函数。D3将不知道把参数d传给谁.
3、对于Text更进一步研究
attr()
和 style()
)独立的设置HTML和CSS属性的时候,事情变得越来越好玩了。比如,在我们代码最后一行添加代码
.style("color", "red");
效果图:
所有的问题都变红了,很好的表换。更重要的是,我们可以使用一个自定义的函数来设定文字颜色,仅仅当数据超过一定阀值时才会变红。因而,我们重写最后一行代码,使用如下函数
.style("color", function(d) { if (d > 15) { //Threshold of 15 return "red"; } else { return "black"; }});
效果图:
我们可以看到前3行是黑的,但是一旦超过规定的阀值15,text变红。
下一讲,我们会使用attr()
和style()
来操作div
s,产生一个简单地条形图----我们第一个可视化产品!
- d3(二)
- 使用D3制作图表(二)
- d3.js学习笔记(二) 柱形图
- 二 d3.数据绑定
- d3学习之(Data Visualization with d3.js Cookbook )二(第一章)
- d3学习之(Data Visualization with d3.js Cookbook )二(第二章)
- d3学习之(Data Visualization with d3.js Cookbook )二(第二章)
- 【D3.js数据可视化系列教程】(二十八)--弦图
- 【D3.js数据可视化系列教程】(二十八)--弦图
- D3形状(二):曲线工厂
- 【D3】D3 使用教程(1)-数据
- d3
- D3
- d3
- D3
- D3
- D3
- D3
- 打印最优二叉查找树
- 关于邮件营销
- 深入浅出REST
- 安装.net framework 4.0 失败,错误HRESULT 0xc8000222解决办法
- 当电脑硬盘坏道出现时,如何屏蔽
- d3(二)
- AJAX建立和服务器连接,接收服务器技术处理服务器返回的数据
- C++中struct和class的区别
- 一些经验总结
- qt获取电脑的屏幕坐标
- 【转载】linux中误删除oracle数据文件的恢复操作
- C/C++中const char *变量的内存布局位置
- 安装 Cassandra 服务,使用命令行进行key操作,很简单
- chrome 下 php setcookie domain设置为localhost 或 127.0.0.1 取不到值