饼状图的拖拽

本文讲解稍微复杂一些的拖拽应用，即拖拽饼图的各部分。 [](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/621.png) 在【[入门 - 第 9.1 章](http://www.ourd3js.com/wordpress/?p=190)】讲解了如何制作饼状图。饼状图的各部分是用具有宽度的弧线来表示的。在与用户进行交互的时候，如果每一部分都能拖拽，是很有趣的。 ## 1.饼状图的绘制 与【[入门 - 第 9.1 章](http://www.ourd3js.com/wordpress/?p=190)】稍有有些不同，我们对饼状图的每一个区域都使用一个 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](http://www.ourd3js.com/demo/J-6.2/dragpie.html) 谢谢阅读。 ### 文档信息 - 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND） - 发表日期：2015 年 1 月 6 日 - 更多内容：[OUR D3.JS - 数据可视化专题站](http://www.ourd3js.com/) 和 [CSDN个人博客](http://blog.csdn.net/lzhlzz) - 备注：本文发表于 [OUR D3.JS](http://www.ourd3js.com/) ，转载请注明出处，谢谢