首先把效果图放出来：

具备了一个柱状图的基础元素：柱形，坐标轴，刻度，数值等。

不得不说，d3.js比直接用的echarts更麻烦，但是确实更自由。

来看看如何实现吧。

//确定画布的大小定义变量宽度=400;可变高度=400;//在身体里添加一个挽救(保存的简写)画布var svg=d3.select('body ').追加(' svg ').attr('宽度'，宽度).attr('高度，高度);//定义画布周围空白的地方var padding={left: 30，right: 30，top: 20，bottom : 20 }；//定义一个数组定义变量数据集=[10,20,30,40,30,20,10,5];//x轴的比例尺var xScale=d3.scale。序数()。域(d3.range(dataset.length)).rangeRoundBands([0，宽度填充。左填充。右])；//y轴的比例尺var yScale=d3.scale.linear().域([0，d3.max(数据集)])。范围([高度-填充。顶部填充。底部，0])；//定义x轴var xAxis=d3.svg.axis().刻度(xScale).定向('底部');//定义y轴var yAxis=d3.svg.axis().标度(yScale).定向('左');//矩形之间的空白var rect padding=4；//添加矩形元素var rects=svg.selectAll(' .我的直肠' .数据（数据集)。输入()。追加(' rect ').attr('class '，' MyRect ').attr('填充','钢蓝色')。attr('transform '，' translate(' padding.left '，' padding.top ')).attr('x '，函数(d，I){ return XScale(I)rect padding/2；}) .attr('y '，函数{返回yScale(d)；}) .attr('width '，xScale.rangeBand() -矩形填充).attr('height '，function(d){ return height-padding。顶部填充。底部-y scale(d)；});//添加文字元素var texts=svg.selectAll ' .我的文字').数据（数据集)。输入()。追加('文本')。attr('class '，' MyText ').attr('填充','白色')。attr('文本锚','中间')。attr('transform '，' translate(' padding.left '，' padding.top ')).attr('x '，函数(d，I){ return XScale(I)rect padding/2；}) .attr('y '，函数{返回yScale(d)；}) .attr('dx '，function(){ return(XScale。range band()-矩形填充)/2；}) .attr('dy '，函数{返回20；}) .文本(函数(d){返回d；});//添加x轴svg.append('g ').attr('类'，'轴').attr('transform '，' translate(' padding.left '，'(height - padding.bottom)')').调用(Xaxis)；//添加y轴svg.append('g ').attr('类'，'轴').attr('transform '，' translate(' padding.left '，' padding.top ')).呼叫(雅西)；总结

好了，以上就是利用D3.js实现最简单柱状图的例子，怎么样？简单吧？希望本文的内容对刚学习d3.js的朋友们能有所帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。