前言
因为我之前用的是echarts来做数据可视化，而且用了相当长一段事件，基本上各种图形都用过，所以对数据可视化的一些基础的东西还有交互还是有一些了解的，所以知道不管是canvas还是svg来做数据可视化大概都是那么些玩意，只是套路有一些差别罢了
接下来我们来做一个柱状图，我们先从比较基础得做起，并加上一些基础的事件交互
柱状图
什么是柱状图
我们来想一下做一个柱状图需要什么东西，由什么组成
x,y轴，一根或多跟柱子 ——>这就是一个简单的柱状图
关于实现细节的问题
- 因为d3画图是把svg当成一个dom元素放到页面上展示，首先就需要有宽高
如果不了解svg ---- 传送门 - 柱状图是由一个个的柱子组成的那么柱子就要设置宽度，高度肯定是根据数据来的
- x,y取值范围当然不能写死，因为有时候读取的后台数据是不可控的，那么也是我们通过计算得出来的
纠正一个思想误区
关于x,y这里要解释一下，我们看见的常规柱状图是
image.png
但是svg实际绘图得时候x,y是需要处理才能展现出常规的柱状图
举例说明一下，就像一个宽高都是500px的一个div我们在里面添加元素的时候肯定是自左向右，自上往下排的
image.png
svg的x轴y轴是下图这样的，当然最后给我们呈现的常规柱状图，肯定是需要我们通过代码处理的
image.png
实现它
准备工作
//给一个数据
const dataArr = [
{name: 'one', value: 32},
{name: 'two', value: 36},
{name: 'three', value: 40},
{name: 'four', value: 44},
{name: 'five', value: 48},
{name: 'six', value: 52},
{name: 'seven', value: 56},
{name: 'eight', value: 60},
{name: 'nine', value: 64},
];
// 处理数据
const nameArr = dataArr.map((item)=> { return item.name});
const valueArr = dataArr.map((item)=> { return item.value});
//指定容器的宽高
let padding = {top: 20, right: 20, bottom: 20, left: 20},
width = 500 - padding.right - padding.left,
height = 500 - padding.bottom - padding.top;
创建x,y轴比例尺
这就是上述的问题x,y不能写死，而且柱子应该按照对应轴的比例缩放
//x,y轴比例尺
let xscale = d3.scaleBand().domain(nameArr).rangeRound([0,width]).padding(0.1);
let yscale = d3.scaleLinear().domain([0,d3.max(valueArr)]).rangeRound([height,0]);
创建svg
//创建svg
const svg = d3.select('#force').append('svg')
.attr('width',width + padding.left + padding.right)
.attr('height',height + padding.top + padding.bottom);
//添加g标签
const g = svg.append('g')
.attr('transform',`translate(${padding.top}, ${padding.left})`)
//创建下x,y轴
//像svg添加x轴
g.append('g')
.attr('class','axis')
.attr('transform',`translate(0, ${height})`)
.call(d3.axisBottom(xscale))
.attr('font-weight','blod')
//像svg添加y轴
g.append('g')
.attr('class','axis')
.call(d3.axisLeft(yscale).ticks(10))
创建柱子容器,方便绑定事件
const chart = g.selectAll('bar').data(dataArr).enter().append('g')
绑定数据，画rect
chart.append('rect')
.attr('class','bar')
.attr('x', function (item) {
return xscale(item.name)
})
.attr('width',xscale.bandwidth())
.attr('y', function (item) {
return yscale(item.value)
})
.attr('height', function (item) {
return height - yscale(item.value)
})
.attr('fill','steelblue')
添加标题
g.attr('class','title')
.append('text')
.attr('transform',`translate(${width/2}, 20)`)
.attr('text-anchor','middle')
.attr('font-weight','600')
.text('最简单的柱状图')
.attr('fill','#666')
加一个简单的事件交互
chart.on('mouseover',function () {
d3.select(this).attr('opacity', '0.7')
})
.on('mouseout',function () {
d3.select(this).attr('opacity', '1')
})
