【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
2015-01-06 13:06
357 查看
本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分。
在【入门 - 第 9.1 章】讲解了如何***饼状图。饼状图的各部分是用具有宽度的弧线来表示的。在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的。
然后再使用 d3.select(this) 选择当前元素,给其应用 transform 即可完成平移操作。
源代码单击以下链接后查看:
http://www.ourd3js.com/demo/J-6.2/dragpie.html谢谢阅读。
发表日期:2015 年 1 月 6 日
更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
在【入门 - 第 9.1 章】讲解了如何***饼状图。饼状图的各部分是用具有宽度的弧线来表示的。在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的。
1.饼状图的绘制
与【入门 - 第 9.1 章】稍有有些不同,我们对饼状图的每一个区域都使用一个 g 标签将其包围起来,以便平移操作。var gAll = svg.append("g") .attr("transform","translate("+outerRadius+","+outerRadius+")"); var arcs = gAll.selectAll(".arcs_g") .data(pie(dataset)) .enter() .append("g") .each(function(d){ //指定当前区域的平移量 d.dx = 0; d.dy = 0; }) .call(drag); //调用drag函数那么在平移的时候,只需要对各部分的 g 使用 transform 即可。在 drag 事件发生时,根据鼠标的参数即可计算出偏移量。上面使用了一个 each() 函数,为每一个区域添加两个变量: dx 和 dy 。用于保存偏移量。
2. drag 事件的定义
每次触发 drag 事件,我们只需要获取鼠标的偏移量,再将其加到原偏移量 dx 和 dy 上即可。然后再使用 d3.select(this) 选择当前元素,给其应用 transform 即可完成平移操作。
var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("drag", dragmove); function dragmove(d) { d.dx += d3.event.dx; d.dy += d3.event.dy; d3.select(this) .attr("transform","translate("+d.dx+","+d.dy+")"); }
3. 结果
结果如下,饼图的每一块都可以拖拽:源代码单击以下链接后查看:
http://www.ourd3js.com/demo/J-6.2/dragpie.html谢谢阅读。
文档信息
版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)发表日期:2015 年 1 月 6 日
更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
相关文章推荐
- 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
- 【 D3.js 进阶系列 — 6.0 】 拖拽的应用(Drag)
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
- 【 D3.js 进阶系列 — 5.0 】 直方图
- 【 D3.js 进阶系列 — 3.1 】 圆形分区图
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
- 【 D3.js 进阶系列 — 3.0 】 分区图
- 【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
- 【 D3.js 进阶系列 】 进阶总结
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
- 【 D3.js 进阶系列 】 进阶总结
- 【 D3.js 进阶系列 — 5.0 】 直方图
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
- 【 D3.js 入门系列 --- 9.1 】 饼状图的制作
- 【 D3.js 进阶系列 — 2.2 】 力学图的参数
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
- 【 D3.js 进阶系列 — 1.1 】 其它表格文件的读取
- 【 D3.js 进阶系列 — 1.1 】 其他表格文件的读取
- 【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图