了解 d3 基本的 methods 及 scale 作用。試著修改 domain, range，以及 style 來影響結果，新增 data
原本將最大值的 bar 改成別的顏色，但如果資料是已排序過的，意義就不大。所以僅調整了最大值的 font size
-
-
Save ctiml/2a572703f11ed5a156f5 to your computer and use it in GitHub Desktop.
01-Bar Chart I
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment