本文主要是介绍D3.js绘制柱形图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
注意：此次绘制的柱形图不涉及坐标。
步骤：
一.添加矩形。
<script type="text/javascript">var datest = [30,78,90,210,105,98,150,177]; //绘制柱形图所用的数据var width = 400; //svg绘图区域的宽度var height = 400; //svg绘图区域的高度var svg = d3.select('body') //选择<tbody>.append('svg') //在<tbody>中添加<svg>.attr('width', width) //设置<svg>的宽度属性.attr('height', height) //设置<svg>的高度属性var padding = {top: 20, right: 20, bottom: 20, left: 20}; //定义上下左右的内边距//矩形所占的宽度（包括空白）var rectStep = 35;//矩形所占的宽度（不包括空白）var rectWidth = 30;//绘制矩形var rect = svg.selectAll('rect') .data(datest) //绑定数据.enter() .append('rect') //添加rect元素，使他的数量和数组长度一致.attr('fill', 'steelblue') //设置颜色为steelblue.attr('x', function(d,i) {return padding.left + i * rectStep; //设置矩形的x坐标}).attr('y', function(d) {return height - padding.bottom - d; //设置矩形的y坐标}).attr('width', rectWidth) //设置矩形的宽度.attr('height', function(d) {return d; //设置矩形的高度});</script>效果图：
二.添加文字。
//添加文字部分var text = svg.selectAll('text').data(datest).enter().append('text').attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2) //dx是相对于x平移的大小.attr('dy', '1em') //dy是相对于y平移的大小.text(function(d) {return d;})效果图：
三.更新数据。
//更新数据function draw() {//获取矩形的update部分var updateRect = svg.selectAll('rect').data(datest);//获取矩形的enter部分var enterRect = updateRect.enter();//获取矩形的exit部分var exitRect = updateRect.exit();//1.矩形的update部分的处理方法updateRect.attr('fill', 'steelblue') //设置颜色为steelblue.attr('x', function(d,i) { //设置矩形的x坐标return padding.left + i * rectStep;}).attr('y', function(d) { //设置矩形的y坐标return height - padding.bottom - d;}).attr('width', rectWidth) //设置矩形的宽度.attr('height', function(d) { //设置矩形的高度return d;});//2.矩形的enter部分处理办法enterRect.append('rect').attr('fill', 'steelblue') //设置矩形的颜色.attr('x', function(d,i) { //设置矩形的x坐标return padding.left + i * rectStep;}).attr('y', function(d) { //设置巨型的y坐标return height - padding.bottom - d;}).attr('width', rectWidth) //设置矩形的宽度.attr('height', function(d) { //设置矩形的高度return d;});//3.矩形的exit处理方法exitRect.remove();//获取文字的update部分var updateText = svg.selectAll('text').data(datest);//获取文字的enter部分var enterText = updateText.enter();//获取文字的exit部分var exitText = updateText.exit();//1.文字的update部分的处理方法updateText.attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2) //dx是相对于x平移的大小.attr('dy', '1em') //dy是相对于y平移的大小.text(function(d) {return d;});//2.文字的enter部分的处理方法enterText.append('text').attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2) //dx是相对于x平移的大小.attr('dy', '1em') //dy是相对于y平移的大小.text(function(d) {return d;});//3.文字的exit处理办法exitText.remove();}//排序函数function mySort() {datest.sort(d3.ascending);draw();}//增加一个项函数function myAdd() {datest.push(Math.floor(Math.random() * 100));draw();}</script><div class="box"><button type="button" onclick="mySort()">排序</button><button type="button" onclick="myAdd()">增加数据</button></div>
</body>
效果图：
全部代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box {width: 300px;display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 50px;}</style><script src="https://cdn.bootcss.com/d3/3.2.1/d3.js"></script>
</head>
<body><script type="text/javascript">var datest = [30,78,90,210,105,98,150,177]; //绘制柱形图所用的数据var width = 500; //svg绘图区域的宽度var height = 500; //svg绘图区域的高度var svg = d3.select('body') //选择<tbody>.append('svg') //在<tbody>中添加<svg>.attr('width', width) //设置<svg>的宽度属性.attr('height', height) //设置<svg>的高度属性var padding = {top: 20, right: 20, bottom: 20, left: 20}; //定义上下左右的内边距//矩形所占的宽度（包括空白）var rectStep = 35;//矩形所占的宽度（不包括空白）var rectWidth = 30;//绘制矩形var rect = svg.selectAll('rect') .data(datest) //绑定数据.enter() .append('rect') //添加rect元素，使他的数量和数组长度一致.attr('fill', 'steelblue') //设置颜色为steelblue.attr('x', function(d,i) {return padding.left + i * rectStep; //设置矩形的x坐标}).attr('y', function(d) {return height - padding.bottom - d; //设置矩形的y坐标}).attr('width', rectWidth) //设置矩形的宽度.attr('height', function(d) {return d; //设置矩形的高度});//添加文字部分var text = svg.selectAll('text').data(datest).enter().append('text').attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2) //dx是相对于x平移的大小.attr('dy', '1em') //dy是相对于y平移的大小.text(function(d) {return d;});//更新数据function draw() {//获取矩形的update部分var updateRect = svg.selectAll('rect').data(datest);//获取矩形的enter部分var enterRect = updateRect.enter();//获取矩形的exit部分var exitRect = updateRect.exit();//1.矩形的update部分的处理方法updateRect.attr('fill', 'steelblue') //设置颜色为steelblue.attr('x', function(d,i) { //设置矩形的x坐标return padding.left + i * rectStep;}).attr('y', function(d) { //设置矩形的y坐标return height - padding.bottom - d;}).attr('width', rectWidth) //设置矩形的宽度.attr('height', function(d) { //设置矩形的高度return d;});//2.矩形的enter部分处理办法enterRect.append('rect').attr('fill', 'steelblue') //设置矩形的颜色.attr('x', function(d,i) { //设置矩形的x坐标return padding.left + i * rectStep;}).attr('y', function(d) { //设置巨型的y坐标return height - padding.bottom - d;}).attr('width', rectWidth) //设置矩形的宽度.attr('height', function(d) { //设置矩形的高度return d;});//3.矩形的exit处理方法exitRect.remove();//获取文字的update部分var updateText = svg.selectAll('text').data(datest);//获取文字的enter部分var enterText = updateText.enter();//获取文字的exit部分var exitText = updateText.exit();//1.文字的update部分的处理方法updateText.attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2) //dx是相对于x平移的大小.attr('dy', '1em') //dy是相对于y平移的大小.text(function(d) {return d;});//2.文字的enter部分的处理方法enterText.append('text').attr('fill', 'white').attr('font-size', '14px').attr('text-anchor', 'middle').attr('x', function(d,i) {return padding.left + i * rectStep;}).attr('y', function(d) {return height - padding.bottom - d;}).attr('dx', rectWidth / 2) //dx是相对于x平移的大小.attr('dy', '1em') //dy是相对于y平移的大小.text(function(d) {return d;});//3.文字的exit处理办法exitText.remove();}//排序函数function mySort() {datest.sort(d3.ascending);draw();}//增加一个项函数function myAdd() {datest.push(Math.floor(Math.random() * 100));draw();}</script><div class="box"><button type="button" onclick="mySort()">排序</button><button type="button" onclick="myAdd()">增加数据</button></div>
</body>
</html
这篇关于D3.js绘制柱形图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
