本篇文章给大家带来的内容是关于d3.js实现创建完整柱形图的代码介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
d3js.org v5.9.2  
之前只是各个部分的demo，现在将各部分整合起来，发现还是学到了不少东西  
主要是加深了对scale（比例尺）的理解
代码
样式及数据
先是样式
<style>    rect {        fill: pink    }    text {        font-size: 10px;    }</style>
接着是数据及柱状图宽高等
const    data = [3, 6, 10, 25],    barwidth = 100,    barheight = 300,    padding = { //svg留白用        top: 100,        right: 100,        bottom: 100,        left: 100    };
创建比例尺实践之后对比例尺与坐标轴的理解加深了一点
let barscale = d3.scalelinear().domain([0, d3.max(data)]).range([0, barheight]),    yaxisscale = d3.scalelinear().domain([d3.max(data), 0]).range([0, barheight]),//y轴使用线性比例尺，注意domain输入域    xaxisscale = d3.scaleband().domain([1, 2, 3, 4]).range([0, (barwidth - 1) * data.length]); //x轴使用scaleband比例尺
barscale用于柱形图创建  
yaxisscale用于y轴创建，注意domain()的输入域，否则刻度数值大小排列会相反  
xaxisscale用于x轴创建，使用scaleband序数比例尺  
之前对比例尺的理解太过肤浅，这里也做了几个小实验
console.log(`barscale(0)：` + barscale(0));console.log(`yaxisscale(0)：` + yaxisscale(0));console.log(`xaxisscale(2)：` + xaxisscale(2));
显示如下
对于barscale与yaxisscale，输入域相反，所以映射相反，把一篇他人很棒的总结放于文末
创建柱状图let barcontainer = d3.select('.chart')    .attr('width', data.length * barwidth + padding.left + padding.right)    .attr('height', barheight + padding.top + padding.bottom)    .selectall('g')    .data(data).enter().append('g')    .attr('transform', (d, i) => {        return 'translate(' + (padding.left + i * barwidth) + ',' + (padding.top + barheight - barscale(d)) + ')'    });barcontainer.append('rect')    .attr('height', d => barscale(d))    .attr('width', barwidth - 1);barcontainer    .append('text')    .text(d => d)    .attr('y', 10)    .attr('x', barwidth / 2 - 5);
这里使用了之前定义的padding对象的值进行部分留白
创建坐标轴/** * 创造y轴 */let yaxis = d3.axisleft(yaxisscale);d3.select('.chart')    .append('g')    .attr('transform', 'translate(' + (padding.left - 10) + ',' + padding.top + ') ')    .call(yaxis);/** * 创建x轴 */let xaxis = d3.axisbottom(xaxisscale);d3.select('.chart')    .append('g')    .attr('transform', 'translate(' + (padding.left) + ',' + (padding.top + barheight) + ')')    .call(xaxis);
最后创建坐标轴
【相关推荐：javascript视频教程】
以上就是d3.js实现创建完整柱形图的代码介绍的详细内容。