d3.js学习（一）之柱形

平时开发过程中经常会有图表的需求，之前都是用echarts来实现，面对一下复杂的图的时候，真的是焦头烂额，所以学习一下d3.js，以备不时之需。

这次先实现一个简单的效果，以后一步一步深入，先看一下效果图

实现

先引入d3，我这里只是演示，就是直接在script中引入d3.js的cdn地址就可以了

d3实际上就是操作html，svg，css来实现我们的需求，官网也说了，可以实现丝滑的svg交互，所以我们用的他的svgapi来做

先画出矩形

const dataset = [11, 31,14, 9, 24, 17, 88, 18, 65 ];

const w = 500;
const h = 300;

• dataset是数据集
• w,h是svg的宽高

const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

• select() 是选择第一个匹配的元素
• append() 创建，添加，选择一个新元素，这里我们添加一个svg，并选择了他
• attr() 获取或者设置一个属性，这里我们给svg元素加上了width，height属性

svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       .attr("fill", "pink");

• selectAll 在选择的元素中选择多个后代元素，即在svg中选择rect元素，rect是svg中用来创建矩形的元素
• data() 将指定的数据数组和选定的元素绑定，并返回绑定成功的新选择，dataset有9个元素，本来应该和9个rect元素绑定，但是现在还没有rect元素，d3会建立9个空的元素和这些没有对应的数据绑定，接着往下看
• enter() 获取上面那些空的元素
• append() 给那些空的元素创建rect元素，现在每个rect都有对应的数据了
• attr() 给相应的属性赋值，第二个参数可以是函数，函数参数就是绑定的数据以及下标
• 这里注意下 d3默认y轴方向是向下的，所以我们坐标y的计算要用高度去减

现在可以看到效果了

添加文字

我们已经实现了矩形了，实现文字就很简单了

1. 选择text
2. 添加数据集
3. 添加text元素
4. 修改属性，注意高度要比矩形高一点

svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d - 3)
       .text(d => d)

到这里就实现了效果了

下次我们给他加上坐标轴，这次先这样了。