公司我的项目要求做动静条形图，也就是 bar chart race，原本想从网上找个demo察觉没有适合的，就本人写了一个。动静条形图能够很好地比照多个数据随之间变动的趋势。该demo是基于 d3 的 v6 版本，因为仅应用了一些最根底的 api，所以在之前版本应该也能够跑起来。本文章仅提供一种实现的思路，不对 api 和“进入、更新、退出”模式作具体解说，所以在浏览之前最初对它们有一个最根本的理解。
首先须要找一个适合的数据源，如果切实找不到就去我的GitHub上复制就好了，我也是从别的网站复制过去的。
初始化变量
const width = 1200, height = 600, margin = { top: 20, bottom: 0, left: 50, right: 80 };const chartWidth = width - (margin.left + margin.right), chartHeight = height - (margin.top + margin.bottom);const data = [];const count = 10;const duration = 500;const barPadding = 20;const barHeight = (chartHeight - (barPadding * count)) / count;const getDate = () => dataOri[0][dateIndex];let dateIndex = 0;let date = getDate();let dataSlice = [];let chart = null, scale = null, axis = null, svg = null, dateTitle = null;首先设定长、宽、外边距，和图表尺寸。data 寄存格式化后的数据。因为图表不可能把数据源中所有的行都显示进去，所以这里只取前 10 个。每隔 10 秒切换一纵列。柱间距为 20 。用图表高度减去柱间距乘以柱数量再除以柱数量得每个柱的宽。定义一个函数来获取以后列表头，这里就是日期，赋给 date。定义 dataSlice 来寄存以后日期下的所有数据。最初定义 chart 寄存图表实例，scale 寄存比例尺，axis 寄存坐标轴，svg 寄存画布，dateTitle 寄存以后列表头。
const createSvg = () => svg = d3.select('#chart').append('svg').attr('width', width).attr('height', height);创立一个 svg 设置宽高并 append 到事后写好的 container 中。
格式化数据
function randomRgbColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return `rgb(${r},${g},${b})`;}先申明一个创立随机色彩的函数，用来给条形上色。
咱们的数据源是这种模式的，须要对其进行简略的格式化，成为一个一个条目
const formatData = () => { dataOri[0].forEach((date, index) => { if (index > 0) { dataOri.forEach((row, rowIndex) => { if (rowIndex > 0) { data.push({ name: row[0], value: Number(row[index]), lastValue: index > 1 ? Number(row[index - 1]) : 0, date: date, color: randomRgbColor() }); } }); } });}两层循环，第一层循环列，第二层循环行，存入行表头，数据，上一列的数据，如果没有就写 0，列表头，和一个随机的色彩，用作给条形图上色，至于 lastValue 的用处之后用到了会具体解释。
格式化后的数据如图所示：
const sliceData = () => dataSlice = data.filter(d => d.date === date).sort((a, b) => b.value - a.value).slice(0, count);筛选出当天的数据，顺叙排列并取前 10 个
创立坐标轴
const createScale = () => scale = d3.scaleLinear().domain([0, d3.max(dataSlice, d => d.value)]).range([0, chartWidth]);首先把比例尺创立进去，定义域是 0 到当天的最大值，值域是 0 到图表宽度，对 d3.js 的 api 不相熟的同学能够去官网补习一下或者自行百度，罕用的根本就那么几个。
坐标轴的最终成果如下图所示：
须要对坐标轴进行简略的配置
const renderAxis = () => { createScale(); axis = d3.axisTop().scale(scale).ticks(5).tickPadding(10).tickSize(0); svg.append('g') .classed('axis', true) .style('transform', `translate3d(${margin.left}px, ${margin.top}px, 0)`) .call(axis);}调用之前定义的比例尺函数创立比例尺，而后设置顶部的坐标轴，ticks 设置 5 个刻度（这个办法比拟有意思，尽管设置了5，然而不肯定真的是 5，可能比 5 多也可能比 5 少），tickPadding 设置刻度与数值之间的间距，tickSize 设置刻度线长度，这里不让它显示。设置实现之后 append 到图表中，程度位移，让出边距的地位。
创立参考线
这条竖线就是参考线，从坐标轴刻度延长进去，贯通整个图表。
const renderAxisLine = () => { d3.selectAll('g.axis g.tick').select('line.grid-line').remove(); d3.selectAll('g.axis g.tick').append('line') .classed('grid-line', true) .attr('stroke', 'black') .attr('x1', 0) .attr('y1', 0) .attr('x2', 0) .attr('y2', chartHeight);}因为随着数据的变动，参考线是一直变动的，该函数会被重复调用，所以要在一开始革除上一组数据的参考线。而后在坐标轴每一个有刻度线的地位都 append 一条线进去，x1 和 y1 是该条线绝对于父元素的左端点，x2 和 y2 是右端点，因为要贯通整个图表，所以右端点的 y 坐标设置为 chartHeight。
创立列表头
图表右下键这个日期，也就是列的表头
const renderDateTitle = () => { dateTitle = svg.append('text') .classed('date-title', true) .text(date) .attr('x', chartWidth - margin.top) .attr('y', chartHeight - margin.left) .attr('fill', 'rgb(128, 128, 128)') .attr('font-size', 40) .attr('text-anchor', 'end')}位移至右下角，设置色彩。这里重点说一下 text-anchor，次要使用在 svg 中 <text> 标签的一个属性，设置文本的对其形式，设置为 end 示意文本字符串的开端即以后文本的初始地位。
创立图表主体
const createChart = () => { chart = svg.append('g') .classed('chart', true) .style('transform', `translate3d(${margin.left}px, ${margin.top}px, 0)`);}创立一个容器寄存多个条形，并移到正地方。
const renderChart = () => { // 进入、更新、退出模式}该函数寄存进入更新退出模式的代码，如果对进入、更新、退出模式不太理解的同学还是倡议先去自行了解一下。
const bars = chart.selectAll('g.bar').data(dataSlice, (d) => d.name);let barsEnter;barsEnter = bars.enter() .append('g') .classed('bar', true) .style('transform', (d, i) => `translate3d(0, ${calTranslateY(i)}px, 0)`);dateIndex > 1 && barsEnter .transition().duration(this.duration) .style('transform', (d, i) => `translate3d(0, ${calTranslateY(i, 'end')}px, 0)`);barsEnter.append('rect') .style('width', d => scale(d.value)) .style('height', barHeight + 'px') .style('fill', d => d.color);barsEnter.append('text') .classed('label', true) .text(d => d.name) .attr('x', '-5') .attr('y', barPadding) .attr('font-size', 14) .style('text-anchor', 'end');barsEnter.append('text') .classed('value', true) .text(d => d.value) .attr('x', d => scale(d.value) + 10) .attr('y', barPadding);将图形与 dataSlice 绑定，barsEnter 代表的是绑定了数据的图形，设置它的宽，高和色彩，条形左侧的 y 轴，这里对应的国家的名字，还有右侧数值标注。这里用到了一个工具函数：
const calTranslateY = (i, end) => { if (dateIndex === 1 || end) { return (barHeight + barPadding) * i + (barPadding / 2); } else { return (barHeight + barPadding) * (count + 1); }}当数据为第一列或者传入 end 的时候条形的纵轴地位在排序所在的地位，否则都放在图表里面，期待进入。
bars.transition().duration(duration).ease(d3.easeLinear) .style('transform', function (d, i) { return 'translate3d(0, ' + calTranslateY(i, 'end') + 'px, 0)'; }) .select('rect') .style('width', function (d) { return scale(d.value) + 'px'; });bars .select('text.value') .transition().duration(duration).ease(d3.easeLinear) .attr('x', function (d) { return scale(d.value) + 10; }) .tween('text', function (d) { const textDom = this; const i = d3.interpolateRound(d.lastValue, d.value); return (t) => textDom.textContent = i(t); });更新模式，第一个办法链目标是条形依照程序排序，并且依据数值设定宽度。第一个办法链是设定右面标注的数值，并且自定义了一个数值过渡，让数值的增长没有那么僵硬，这里用到了一开始格式化数据的时候设置的 lastValue。
bars.exit() .transition().duration(duration).ease(d3.easeLinear) .style('transform', function (d, i) { return 'translate3d(0, ' + calTranslateY(i) + 'px, 0)'; }) .style('width', function (d) { return scale(d.value) + 'px'; }) .remove();退出模式，将退出后的条形移到屏幕外并删除。
调用办法
const init = () => { createSvg(); // 创立一个svg formatData(); // 格式化数据 sliceData(); // 截取当天数据 renderAxis(); // 渲染坐标轴 renderAxisLine(); // 渲染批示线 renderDateTitle(); // 渲染日期 createChart(); // 创立图表 renderChart(); // 渲染图表 createTicker(); // 创立定时器}init();顺次调用一开始申明的那些办法，还有最初一个 createTicker 办法没有申明
function createTicker() { const ticker = d3.interval(() => { if (dateIndex < dataOri[0].length - 1) { dateIndex++; date = getDate(); dateTitle.text(date); sliceData(); updateAxis(); renderAxisLine(); renderChart(); } else { ticker.stop(); } }, duration);}创立了一个定时器，每隔 duration 设定的事件进行切换，更新坐标轴、辅助线、图表等，这里用到了 updateAxis 办法。
const updateAxis = () => { createScale(); axis.scale().domain([0, d3.max(dataSlice, d => d.value)]); svg.select('g.axis') .transition().duration(duration).ease(d3.easeLinear) .call(axis); d3.selectAll('g.axis g.tick text').attr('font-size', 14);}该办法用于当数据扭转是更新坐标轴。
总结
动静条形图的所有性能都曾经开发完了，关上页面就能够看到动画成果了。残缺代码能够我的GitHub中下载。其实该图表算是 d3 比拟入门的成果，把握了进入、更新、退出模式和过渡之后就能够开发进去了。本文提供的思路也并非该图表实现的最优解，如有更好的实现办法欢送留言探讨。