[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> ```