Arc-Locator-drag

by rohdz

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg id="svg_donut" width="600" height="400"></svg>

JavaScript

var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);

data = [[0,50,"#ccc"]];


var vis = d3.select("#svg_donut");

var arc = d3.svg.arc() .innerRadius(90) .outerRadius(100) .startAngle(function(d){return cScale(d[0]);}) .endAngle(function(d){return cScale(d[1]);});

vis.selectAll("path") .data(data) .enter() .append("path") .attr("d", arc) .style("fill", function(d){return d[2];}) .attr("transform", "translate(300,300)");