[TOC] ## 安裝 `<script src="https://cdn.bootcss.com/d3/5.9.7/d3.min.js"></script>` ## 繪制條形圖 [codepen 中查看代碼](http://codepen.io/SitePoint/pen/wWJXWa) ``` <style> #chart div { display: inline-block; background: #4285F4; width: 20px; margin-right: 3px; } </style> <div id="chart"></div> <script> d3.select('#chart') .selectAll("div") .data([4, 8, 15, 16, 23, 420]) .enter() .append("div") .style("height", (d)=> d + "px") </script> ``` ## GitHub 貢獻表 `colorMap` 函數接收的輸入值要在0到1之間，返回的是一個顏色值，這個值是在以輸入值中兩兩數據為顏色值之間的漸變色值。插值法是圖形編程和動畫的關鍵點 ``` <style> #chart div { display: inline-block; width: 20px; height: 20px; margin-right: 3px; } </style> <div id="chart"></div> <script> const colorMap = d3.interpolateRgb( d3.rgb('#d6e685'), d3.rgb('#1e6823') ) d3.select('#chart') .selectAll("div") .data([.2, .4, 0, 0, .13, .100]) .enter() .append("div") .style("background-color", (d)=> { return d == 0 ? '#eee' : colorMap(d); }) </script> ```