【 D3.js 进阶系列 — 3.1 】 圆形分区图

分区图布局的 size 函数很有意思,即可用于制作矩形分区图,也可用于制作圆形分区图。本文就来谈讨一下圆形分区图的制作。

311

本文与【进阶 – 第 3.0 章】基本相同,只有布局函数的 size 函数和绘制图形的部分稍有区别。

1. 数据

本文仍然使用【入门 – 第 9.4 章】的数据,内容为中国境内几个城市的所属关系。

2. 布局(数据转换)

第 3 行:size 函数,第一个值为 2 * PI ,第二个值为圆半径的平方。如果您只需要得到效果,可不比深究为什么这么做,只需记得这么用即可。

注意第3行与【进阶 – 第 3.0 章】的不同。

3. 绘制

先定义一个绘制弧形的函数,这个函数在【入门 – 第 9.1 章】中也用过。

请好好体会上面的代码是什么意思。如果以圆形的形式来转换数据,那么 d.x 和 d.y 分别代表圆弧的绕圆心方向的起始位置由圆心向外方向的其实位置。d.dx 和 d.dy 分别代表各自的宽度。

接下来分别绘制圆弧和文字。

绘制方法问题不大,唯一要注意的是文字的旋转角度问题,请好好看看上面的注释问题。

4. 结果

完整代码,请点击下面的链接,再右键点击查看源代码:

http://www.ourd3js.com/demo/J-3.1/circle_partition.html

文档信息

【 D3.js 进阶系列 — 3.1 】 圆形分区图》上有12条评论

  1. 楼主 我想在一个饼图之外 再画一个饼图,也就是有两圈,但是这两个圈的数据其实是没有关系的 ,请问怎么画?

    • 绘制两个饼图几个,中心位于同一个位置。
      分别调整两个饼图的内外半径,使其中一个饼图的中心是空的。

  2. r = 180 * ((d.x + d.dx / 2 – Math.PI / 2) / Math.PI);

    这句知道是弧度转成角度,但有不明白的地方:
    以“浙江”为例,它的x=0, dx=1.32

    x + dx / 2 – Math.PI/2 为什么是这样能讲解一下吗?(Math.PI/2 相当于90°吧)

    谢谢!

    • 是弧度转换成角度。Math.PI确实是表示90°。

      x + dx/2 表示弧的中心,这个应该好理解,x是起始弧度,dx是弧度的宽度,因此 x + dx/2 就是弧的中心。我想你的疑问是为什么要减去 Math.PI / 2 吧。

      由于给文字元素<text>设置tranform属性时,使用rotate来旋转文字,这个旋转是从水平向右开始旋转的。而分区图布局的起始旋转确实从垂直向上开始旋转的,二者相差了90度,即 Math.PI /2 ,你看图就可以发现“中国”的第一个子元素“浙江”是从垂直向上的轴开始的。因此,要在 x + dx/2 的值上减去 Math.PI /2

      最后,再将 x + dx/2 – Math.PI/2 转换成角度,即

      ( x + dx/2 – Math.PI/2 ) /Math.PI * 180

      这就是你看到的结果。

       

      • 有点概念了,自己再琢磨琢磨,谢谢!

  3. 能不能讲一下d3中的载入外部资源那部分啊,就是关于xhr的,谢谢了~~

      • 那就是说if( i == 0 )return “translate(” + arc.centroid(d) + “)”;这里,求得的arc.centroid(d) ,不是内圆的中间了?我还得平移?

        • 求得的是圆弧的中间,圆弧的中间就是在那个,从0点钟位置旋转到12点,6点钟的位置是圆弧的中间。

评论已关闭。