使用D3.js绘制水平柱状图

一、先看效果图：

使用D3.js绘制水平柱状图

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

<!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,15,22,7,3,8]
           // 定义每个柱形图之间的间隙和高度
           var barHeigth = 50
           var barPadding = 10
           var svgWidth = 500
           //计算svg的高度
           var svgHeight = (barHeigth+barPadding)*data.length
           // 定义线性缩放
           var scale = d3.scale.linear()
                   .domain([0,d3.max(data)])
                   .range([0,svgWidth])
           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元素
                   .append('g')
                   .attr('transform',function(d,i){ return 'translate(0,'+i*(barHeigth+barPadding)+')'})

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

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

使用D3.js绘制水平柱状图

相关推荐