D3 Examples - Arc drag

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
  <style>
    body { 
      margin:0;
      position:fixed;
      top:139;right:0;bottom:0;left:100; 
/*       background-color: #000; */
    }
 
.label {
  font: 24px sans-serif;
  text-anchor: middle;
  color: #000;
}
    
  </style>
</head>
​
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var w = 400,h = 400,cx = w/2, cy = h/2, strokeColor = "#00527C";
var now = new Date();
var scale = d3.scale.linear().domain([0,360]).range([0,24]);
var fields = [
  {value: 24, size: 24, label: " h", update: function(date) { return date.getHours(); }, 
   change: function(value) { return Math.floor(scale(value)); }}];
  
  // variable for arc
var arcStartAngle = 0  , arcInnerRadius = w / 2 - 20 , arcOuterRadius = w / 2 - 10
​
  // variable for circle
var circleRadius = 10 , anglePoint = 0;
​
  // variable for animate arc path
var fullAngle = Math.PI * 2 , maxStep = 24 * 60 , anglePerStep = fullAngle / maxStep , currentStep = 0 , animateDuration = 50;
​
// create main svg
var svg = d3.select("body").append("svg")
  .attr("width", w)
  .attr("height", h)
  .attr("id", "clock");
​
// create arc group
var arcGroup = svg.append("g")
  .attr(
    "transform", 
    "translate(" + w / 2 + "," + h / 2 + ")"
  );
​
var arc = d3.svg.arc()
  .innerRadius( arcInnerRadius )
  .outerRadius( arcOuterRadius )
  .startAngle( arcStartAngle )
    .endAngle((now.getHours() / fields[0].size) * 2 * Math.PI );
​
var arcBackground = d3.svg.arc()
  .innerRadius( arcInnerRadius )
  .outerRadius( arcOuterRadius )
  .startAngle( arcStartAngle )
    .endAngle( 2 * Math.PI);
  
 arcGroup.append("path")
        .style("fill", "#00f")
    .attr("class", "arc")
    .attr("d", arcBackground); 
  
// create arc path
var arcStart = arcGroup.append("path")
  .datum({ endAngle: (now.getHours() / fields[0].size) * 2 * Math.PI })
  .style("fill", "#ff0")
  .attr("stroke-width", 1)
  .attr("d", arc);
​
  
  // create time field
var field = svg.selectAll(".field")
    .data(fields)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(" + w/2 + "," + h / 2 + ")"; })
    .attr("class", "field");
​
  // create label
var label = field.append("text")
    .attr("class", "label")
    .attr("dy", ".35em");
  
  // create circle
var circleStart = arcGroup.append("circle")
  .attr("r", circleRadius)
  .attr("fill", "#222")
  .attr("stroke-width", circleRadius/2 + 2)
  .attr("cursor", "move")
  .call( d3.behavior.drag().on('drag', function(){
    a = findAngle(d3.event.x, d3.event.y);
    currentStep = angleToStep(a);
    setAngleStep(currentStep);
    field.each(function(d) { d.value = d.change(Math.floor(a))});
    label.text(function(d) { return d.value + d.label});
  }) );
  
​
  
// init
setAngleStep(currentStep);
​
(function update() {
  var now = new Date();
​
  field
      .each(function(d) { d.previous = d.value, d.value = d.update(now); });
​
  label
      .text(function(d) { return d.value + d.label; });
​
//   setTimeout(update, 1000 - (now % 1000));
})();
  
// set animate step
function setAngleStep(step) {
  if (step > maxStep || step < 0)
    return;
  console.log('step:', step);
​
  arcStart.transition()
    .duration(animateDuration)
    .ease("linear")
    .call(
      arcTween,
      anglePerStep * step, 
      arc
    );
}
​
// animate function
function arcTween(transition, newAngle, arc) {
  // arc path transition
  transition.attrTween("d", function(d) {
    var interpolate = d3.interpolate(d.endAngle, newAngle);
    return function(t) {
      d.endAngle = interpolate(t);
      
      console.log('end angle:', d.endAngle / anglePerStep / 4);
      
      // translate circle
      anglePoint = Math.ceil(d.endAngle / anglePerStep) / 4;
      
      moveCircle(anglePoint);
      
      return arc(d);
    };
  });
}
​
function angleToStep(angle) {
  return angle * 4;
}
​
function stepToAngle(step) {
  return;
}
​
function findAngle(x, y) {
  addAngle = x < 0 ? 270 : 90;
  return (Math.atan(y/x) * 180 / Math.PI) + addAngle; 
}
​
function moveCircle(angle) {
  var r = h/2 - 15;
  var x = r * Math.sin(angle * Math.PI / 180);
  var y = -r * Math.cos(angle * Math.PI / 180);
  
  circle
    .attr("cx", x)
    .attr("cy", y)
    ;
}
​
  </script>
</body>
​
    