【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分。

621

在【入门 – 第 9.1 章】讲解了如何制作饼状图。饼状图的各部分是用具有宽度的弧线来表示的。在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的。

1.饼状图的绘制

与【入门 – 第 9.1 章】稍有有些不同,我们对饼状图的每一个区域都使用一个 g 标签将其包围起来,以便平移操作。

那么在平移的时候,只需要对各部分的 g 使用 transform 即可。在 drag 事件发生时,根据鼠标的参数即可计算出偏移量。上面使用了一个 each() 函数,为每一个区域添加两个变量: dx 和 dy 。用于保存偏移量。

2. drag 事件的定义

每次触发 drag 事件,我们只需要获取鼠标的偏移量,再将其加到原偏移量 dx 和 dy 上即可。

然后再使用 d3.select(this) 选择当前元素,给其应用 transform 即可完成平移操作。

3. 结果

结果如下,饼图的每一块都可以拖拽:

源代码单击以下链接后查看:

http://www.ourd3js.com/demo/J-6.2/dragpie.html

谢谢阅读。

文档信息