使用 svg 在畫圖形上的便利性提高了不少,另外了解到幾乎所有屬性的設定都是可以傳值或傳 callback,callback 都有 d, i 可以用
原本 data 是寫死在 index.html,改成讀取外部 data.tsv 檔。data.tsv 多了欄位 name,所以試著把 name 也呈現在圖表上
name | value | |
---|---|---|
Locke | 4 | |
Reyes | 8 | |
Ford | 15 | |
Jarrah | 16 | |
Shephard | 23 | |
Kwon | 42 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.chart rect { | |
fill: steelblue; | |
} | |
.chart text.number { | |
fill: white; | |
font: 10px sans-serif; | |
text-anchor: end; | |
} | |
.chart text.name { | |
fill: white; | |
font: 10px sans-serif; | |
} | |
</style> | |
<svg class="chart"></svg> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var width = 420, | |
barHeight = 20; | |
var x = d3.scale.linear() | |
.range([30, width]); | |
var chart = d3.select(".chart") | |
.attr("width", width) | |
d3.tsv("data.tsv", type, function(error, data) { | |
console.log(data); | |
x.domain([0, d3.max(data, function(d) {return d.value; })]); | |
chart.attr("height", barHeight * data.length); | |
var bar = chart.selectAll("g") | |
.data(data) | |
.enter().append("g") | |
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); | |
bar.append("rect") | |
.attr("width", function(d, i) { return x(d.value); }) | |
.attr("height", barHeight - 2); | |
bar.append("text") | |
.attr("class", "number") | |
.attr("x", function(d) { return x(d.value) - 3; }) | |
.attr("y", barHeight / 2) | |
.attr("dy", ".35em") | |
.text(function(d) { return d.value; }); | |
bar.append("text") | |
.attr("class", "name") | |
.attr("x", 2) | |
.attr("y", barHeight / 2) | |
.attr("dy", ".35em") | |
.text(function(d) { return d.name; }); | |
}); | |
function type(d) { | |
d.value = +d.value; | |
return d; | |
} | |
</script> |