使用D3.js绘制竖直柱状图表

最新推荐文章于 2022-09-08 16:20:00 发布

xinxiaoyong

最新推荐文章于 2022-09-08 16:20:00 发布

阅读量383

点赞数

分类专栏： svg画图文章标签：使用D3.js绘制竖直柱状图表 d3绘制竖直柱状图表

本文链接：https://blog.csdn.net/xinxiaoyonng/article/details/106653376

版权

svg画图专栏收录该内容

7 篇文章 2 订阅

订阅专栏

一、先看效果图：

二、代码详情：此代码可以直接在本地运行

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>竖直柱状图表</title>
   </head>
   <body>
       <div id="container"></div>
       <script type="text/javascript" src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
       <script type="text/javascript">
           // 定义柱形图数据
           var data = [1,5,7,9,10,14,15,10,3,8]
           // 定义每个柱形图之间的间隙和高度
           var barWidth = 50
           var barPadding = 10
           var svgHeight = 500
           //计算svg的宽度
           var svgWidth = (barWidth+barPadding)*data.length

           // 定义线性缩放
           var scale = d3.scale.linear()
                   .domain([0,d3.max(data)])
                   .range([svgHeight,0])
           var svg = d3.select('#container') // 容器元素选择
               .append('svg') //并向其内添加一个svg元素
               .attr('width',svgWidth) //设置宽高
               .attr('height',svgHeight)

           var bar = svg.selectAll('g') //选择所有g元素
                   .data(data) //使用.data()进行图形数据绑定
                   .enter() //追加插入g DOM元素
                   .append('g')
                   .attr('transform',function(d,i){ return 'translate('+i*(barWidth+barPadding)+',0)'})

           // 定义矩形
               bar.append('rect')
                   .attr({
                       'y': function(d){ return scale(d)},
                       'width': barWidth,
                       'height':function(d){ return svgHeight-scale(d)}
                   })
                   .style('fill','#4682B4')

               bar.append('text')
                   .text(function(d){ return d})
                   .attr({
                       'y':function(d){ return scale(d)},
                       'x':barWidth/2,
                       'text-anchor': 'end' //设置文字对齐属性
                   })
       </script>
   </body>
</html>