本文講解稍微復雜一些的拖拽應用，即拖拽餅圖的各部分。
[](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/) ，轉載請注明出處，謝謝
