18年写的D3动态条形图，再回首仿佛看到曾经那个热爱新技术爱尝试的自己

一、D3 ：javascript的函数库，可视化图表
D3选择器 select：是选择所有指定元素的第一个，selectAll：是选择指定元素的全部 || 选择集；
D3主要采用链式语法 例如：d3.select().attr().style.() 不断地调用函数
二、数据绑定：
(1)、datum：

<div class="box">
     <p></p>
     <p></p>
     <p></p>
 </div>
<script>
    var txt = '数据'
     d3.select('.box')
     .selectAll('p')
     .datum(txt)
     .text(function(d,i){
         return '第' + i + '个是' + d
         //经历了一次遍历 d是元素 i是索引
     })
 </script>    

效果：
第0个是数据

第1个是数据

第2个是数据

(2)、data：

<div class="box">
    <p></p>
     <p></p>
     <p></p>
 </div>
 <script>
     var txtData = ['data01','data02','data03']
     d3.select('.box')
     .selectAll('p')
     .data(txtData)
     .text(function(d,i){
         return '第' + i + '个是' + d
     })
 </script>

效果：
第0个是data01

第1个是data02

第2个是data03
三、动态条形图：
css

.chart{
   width: 400px;
   height: 200px;
   position: relative;
}
.chart div{
   height: 20px;
   background: steelblue;
   text-align: right;
   color: #fff;
   padding-right: 5px;
   line-height: 20px;
   position: absolute;
   left: 0;
}

html+js：

<div class="chart"></div>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
   var data = [20,18,32,50]
   var marginTop = 10; //上下间距
   var chartHeight = 20; //条形高度
   var x = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([0, 300]);//最大宽度为300 也就是说data里最大的数值所对应元素的宽就是300
    d3.select(".chart")
        .selectAll("div")
        .data(data)
        .enter().append("div")
            .style("top", function(d,i){return marginTop*i + chartHeight*i + 'px';})
            //由于每个元素为绝对定位&都重合在一起 加不同的top值来区分 使得两两之间有距离 
            .transition()
            .duration(2000)
            .style("width", function(d) { return x(d) + "px"; })
            .text(function(d) { return d }); //可以直接用具体的数据 也可以当百分比 
</script> 

我来人间一场，也曾想光芒万丈，加油！！！