D3是什麼? 古阿莫會說: 這是一個用javascrip做資料視覺化的故事
故事很簡單, 但是一個馬上就能拿來改改看的範例怎麼那麼難找阿
我先講結論, 把下面的斜體字另到txt,
再把副檔名改成.htm在打開就可以看到成果了
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>D3 Bar Chart Sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<p>Row1: No Data</p>
<p>Row2: No Data</p>
<p>Row3: No Data</p>
<p>Row4: No Data</p>
<p>Row5: No Data</p>
<p>Row6: No Data</p>
<script>
var p = d3.select("body").selectAll("p").data([100,200,500,300]);
p.enter().append("p");
p.exit().remove();
p.text(function(d,i) { return "Row"+i+":" +d;});
p.style("width", function(d,i) { return (d)+"px"; });
p.style("background", "Blue");
</script>
</body>
我們來看這個範例的架構
先給一個標準的HTML頁面
<!DOCTYPE html>
<head>
...
</head>
<body>
...
</body>
然後在head加入 字集, 標題, d3的指令碼
<head>
<meta charset="utf-8">
<title>D3 Bar Chart Sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
在Body加入指令碼區段就大功告成了
<body>
<script>
var p = d3.select("body").selectAll("p").data([100,200,500,300]);
p.enter().append("p");
p.exit().remove();
p.text(function(d,i) { return "Row"+i+":" +d;});
p.style("width", function(d,i) { return (d)+"px"; });
p.style("background", "Blue");
</script>
</body>
可是我說, 那些 p 呢? <p>RowX: No Data</p>
那些是方便講解用加進去的指令, 刪掉也能正常運作的
再來要講D3中, 你不可不知的三件事
1. selectAll
.selectAll("p") 就是把所有的p標籤通通選起來
範例中 d3.select("body")是先把body的標籤選起來,
然後.selectAll("p")把其中的P標籤通通選起來
接著.data([100,200,500,300])是把資料灌進去剛剛選的p標籤
為了等一下方邊操作, 我把這些p先存起來 var p = ...
2. enter
.enter就代表如果剛剛選的p不夠用, 也就是 p數量<data數量 的時候
我們就用.append("p"), 自動加上更多的p標籤
也就是說, 我們不放一開始不加任何一個p標籤也沒關係
3. exit
如果反過來 data數量>p數量 的時候,
就用.exit把多的p選起來, 再用 .remove把他們刪除掉
在這個範例把 exit那一行刪除掉, 就可以看到沒移除掉的效果如何了
最後設定長度和顏色, 第一個d3範例就完成了
留言列表
