本文講解稍微複雜一些的拖拽應用，即拖拽餅圖的各部分。

在【入門 - 第 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. 結果

結果如下，餅圖的每一塊都可以拖拽：

原始碼單擊以下連結後檢視：

謝謝閱讀。

文件資訊

• 發表日期：2015 年 1 月 6 日
• 備註：本文發表於 OUR D3.JS ，轉載請註明出處，謝謝