Arc drag

http://stackoverflow.com/questions/15303342/how-to-apply-drag-behavior-to-a-d3-svg-arc

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<html>
  <body>
    <svg/>
  </body>
</html>

JavaScript

var vis = d3.select('svg')
    .attr({width: 400, height: 400});

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(51)
    .startAngle(240 * (Math.PI/180)) //converting from degs to radians
    .endAngle(120 * (Math.PI/180)) //just radians

var position = [200,200];

var arc = vis.append("path")
    .attr("d", arc)
    .attr("stroke-width", 20)
    .attr("stroke", "#000000")
    .attr("stroke-linecap", "round")
    .attr("transform", "translate(" + position + ")");

var drag = d3.behavior.drag()
        .on("drag", function(d,i) {
            position[0] += d3.event.dx;
            position[1] += d3.event.dy;
            d3.select(this)
            .attr("transform", function(d,i){
                return "translate(" + position + ")"
            })
        });

arc.call(drag);