iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
0
自我挑戰組

30天的切版日記系列 第 14

Day 14 : d3 學習筆記 - 資料

  • 分享至 

  • xImage
  •  

d3
d3 可以處理不同種類的資料,支援使用任何包含數字、字串或物件在內的陣列。也可以有效率的處理JSON,甚至有內建函式,可以載入CSV資料。

建立自己的選擇器

var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p").data(dataset).enter()
.append("p").text(function(d){return d;});

如果要建立新的、和資料綁定在一起的元素,要用enter()函式,這個函式會檢視目前的DOM選擇器,以及傳遞到這個函式的資料。如果接收到的資料比相對應的DOM多,enter()函式就會建立一個新的暫存元素。

使用d3的時候會寫很多匿名函式。這些函式使用來存取個別資料值和計算動態屬性的主要工具。

加上style

var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p").data(dataset).enter()
		.append("p").text(function(d){return "來點文字:" + d;})
		.style("color",function(d){
			if (d > 10) {
				return "red";
			}else {
				return "green";
			}
		});

上一篇
Day 13 : Git & Github 學習筆記(三)
下一篇
Day 15 : d3 學習筆記 - 用資料繪圖
系列文
30天的切版日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言