Arc drag

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

by rohdz

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 dataset = [
    {
        "vendor-name":"HP",
        "overall-score":10
    },
    {
        "vendor-name":"CQ",
        "overall-score":10
    },
    {
        "vendor-name":"Tridion",
        "overall-score":10
    },
    {
        "vendor-name":"Sharepoint Server",
        "overall-score":10
    },
    {
        "vendor-name":"Drupal",
        "overall-score":10
    },
    {
        "vendor-name":"SiteCore",
        "overall-score":10
    }
];

var width = 105
    , height = 105
    , innerRadius = 85;

var drawArc = d3.svg.arc()
    .innerRadius(innerRadius/2)
    .outerRadius(width/2)
    .startAngle(0);

var s = d3.selectAll('.score')
    .data( dataset )
    .enter()
    .append('svg')
    .attr('width', width)
    .attr('height', height)    
    .append('g')
    .attr("transform", "translate(" + width/2  + "," + height/2  + ")");

//creating background circle
s.append("circle")
    .attr("fill", "#ffffff")
    .attr("stroke", "#dfe5e6")
    .attr("stroke-width", 1)
    .attr('r', width / 2);

//creaeting arc path
var arc = s.append("path")
    .attr("fill", "#21addd")
    .attr('class', 'arc')
    .each(function(d) { d.endAngle = 0; })
    .attr('d', drawArc);

//transition arc path from start angle to end angle
arc.transition()
    .duration(750)
    .delay(300)
    .ease('bounce')
    .call(arcTween, this );

//percentage value
s.append('text')
    .text(function(d){
        return d['overall-score'];
    })
    .attr("class", "perc")
    .attr("text-anchor", "middle")
    .attr('font-size', '36px')                        
    .attr("y", +10);

              
function arcTween(transition, newAngle) {
    
    transition.attrTween("d", function(d) {
        
        var interpolate = d3.interpolate( 0, 360*( d['overall-score']/100) * Math.PI/180 );
        
        return function(t) {
            
            d.endAngle = interpolate(t)
            
            return drawArc(d);
        };
    });
}