d3 v4 force

HTML

<script src="https://d3js.org/d3.v4.0.0-rc.2.js"></script>
<div id="container">

</div>

JavaScript

var width = 500;
var height = 500;
var fullAngle = 2 * Math.PI;
var drag = d3.drag().on("drag", function() {
  var rect = d3.select(this);
  var theta = Math.atan2(d3.event.y - height/2, d3.event.x - width/2) * 180 / Math.PI

  rect
    .attr("x", d3.event.x)
    .attr("y", d3.event.y)
    .attr('transform', `rotate(${theta + 90}, ${d3.event.x}, ${d3.event.y})`)
})

var arc2 = d3.arc()
  .innerRadius(195)
  .outerRadius(200)
  .startAngle(0.18)
  .endAngle(fullAngle / 1.02);

var svgContainer = d3.select("#container")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("border", "1px solid");

var group1 = svgContainer.append("g");
var group2 = svgContainer.append("g");
group2.append("path")
  .attr("d", arc2())
  .attr("fill", "blue")

group1.attr("transform", "translate(" + 200 + "," + 200 + ")");
group2.attr("transform", "translate(" + 250 + "," + 250 + ")");

var rectangle = svgContainer.append("rect")
  .attr("x", 150)
  .attr("y", 50)
  .attr("width", 30)
  .attr('class', 'rectangle')
  .attr("height", 70)
  .call(drag)