了解 d3 基本的 methods 及 scale 作用。試著修改 domain, range,以及 style 來影響結果,新增 data
原本將最大值的 bar 改成別的顏色,但如果資料是已排序過的,意義就不大。所以僅調整了最大值的 font size
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.chart div { | |
font: 10px sans-serif; | |
background-color: steelblue; | |
text-align: right; | |
padding: 3px; | |
margin: 1px; | |
color: white; | |
} | |
</style> | |
<div class="chart"></div> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var data = [4, 8, 15, 16, 23, 42, 58]; | |
var x = d3.scale.linear() | |
.domain([0, d3.max(data)]) | |
.range([0, 420]); | |
d3.select(".chart") | |
.selectAll("div") | |
.data(data) | |
.enter().append("div") | |
.style("width", function(d) { return x(d) + "px"; }) | |
.style("font-size", function(d) { return (d == d3.max(data) ? "16px":"")}) | |
.text(function(d) { return d; }); | |
</script> |