用 d3.js 实现基于 SVG 的柱状图
In Web开发 on 2014年02月28日 by view: 12,970
5

之前用 6 步实现了基于 SVG 的折线图,这一篇文章将回到比折线图更基本的图表——柱状图。

本篇直接从创建 SVG 讲起,引入 d3 等简单的准备工作参见用 d3.js 实现基于 SVG 的线形图

step1:模拟数据

step2:创建 SVG 容器

这里的代码就不解释了,前一篇文章已经详细说明。chart 就是最终建立的容器,下面就往容器里面放元素。

step3:画柱状图

前文提到 svg 的元素定位都是基于整个 svg 容器左上角作为原点,但并不能使用 position: absolute 等方法定位,此处的 g 元素通过位移来定位 x 坐标,即 transform: translate(x, 0)。

这里的 bar 可类比 jQuery 对象,是一个类数组对象,bar 调用的方法都会对 bar 里面每个对象进行调用。代码中每一次调用都插入一个矩形,同时设置 y 坐标、高度和宽度,x 坐标跟父容器(g)保持一致即可。这里需要注意 y 坐标往下为正,为了让所有矩形的下边处于同一高度,这里设置每个矩形的 y 坐标为容器高度减去矩形高度。为了用一像素区分开每个矩形,这里设置矩形宽度为父容器的宽度减 1。

通过以上 js 代码再稍微设置一点 css

即可看到一张最简单的柱状图了。

20140228002600

 

step4:添加坐标轴

完整的柱状图就是这样了
20140228235631

 

完整的代码请移步 jsFiddle

由于篇幅关系,本篇文章就暂时只介绍最基本的柱状图是怎么完成的,后续会更新动态柱状图以及为柱状图添加交互系效果的实现方法,敬请期待!

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2014/02/d3-bar-chart/

  1. shaosh 2014 年 11 月 11 日

    另外还有一个问题。
    由于原点在图的左上角,本来应该是 y 大的点在图上的位置靠下,y 小的点在图上的位置靠上。
    把 range 的范围设为 [height,0] 之后,应该是颠倒过来,y 小的点在图上的位置靠下,y 大的点在图上的位置靠上,这时候为什么还要用 height 减去 d 作为 y 呢?y 应该等于 d 才对啊。

  2. shaosh 2014 年 11 月 11 日

    大神,我想问一下,range([height, 0]) 和 range([0, height]) 最后产生的图像为什么没有区别呢?

  3. leeon 2014 年 3 月 17 日

    原来 J 大神在 AlloyTeam:-)

    • hit9 2014 年 4 月 2 日

      好巧啊

      • leeon 2014 年 4 月 2 日

        哈哈,作者是本科时的同学,现在在腾讯

发表评论