10x

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    d3.selection.prototype.moveToFront = function() {  
      return this.each(function(){
        this.parentNode.appendChild(this);
      });
    };
    
    // Feel free to change or delete any of the code you see in this editor!
    const svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 960)
      
    
    const svgp = svg.append("g")
			.attr("transform", "translate(400,300)")
      // set constants
      var PI = Math.PI;
      var arcMin = 0;        // inner radius of the first arc
      var arcWidth = 25;      // width
      var arcPad = 0;         // padding between arcs
      var pieces = 4;

arcs.enter().append("svg:path")
          .attr("class", "arc-path")                  // assigns a class for easier selecting
          .attr("id",(d)=>d.q+"-"+d.p)
              // sets position--easier than setting x's and y's
          .attr("fill", function(d,i){
              // fill is an rgb value with the green value determined by the data
              // smaller numbers result in a higher green value (1 - d/60)
              // you should also look into using d3 scales to create gradients
            //var grn = Math.floor((1 - d/60)*255);
            //console.log((d.q.replace("q",'')*10));
            return "rgb(0, 0,"+ (d.q.replace("q",'')*20) +")";
          })
      
          .attr("class",(d)=>{
           return "path-drop section-"+ d.q + " priority-" + d.p;
      })
          .attr("d", drawArc)     // draw the arc
          .on('click',function(d){
        		console.log(d);
      		})
      
          .on('mouseover',function(){
        		//console.log('hi')
        //d3.select(this).attr("fill","#ffffff");
      })
      .on('dragover',function(){
        alert("on arc")
      })
      
      
      var circleC = svg.append("circle").attr("cx",25).attr("cy",25).attr("r",10)
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
    
    function dragstarted(d,e){
      console.log("s",d,e);
      d3.select(this).raise().classed("active", true);
    }
    
    function dragged(d,e){
      //console.log(d3.event,event,this);
      circleC.attr("cx",d3.event.x)
      circleC.attr("cy",d3.event.y)
      d3.select(this).lower();
      console.log(d3.select(document.elementFromPoint(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY)).attr("id"));
      let containerW = d3.select(document.elementFromPoint(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY)).attr("id");
      d3.select(this).raise();
      d3.select("#"+containerW).attr("fill","#ff0000");
      //console.log(document.elementFromPoint(d3.event.x, d3.event.y));
    }
    
    function dragended(d,e){
     d3.select(this).lower();
      console.log(d3.select(document.elementFromPoint(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY)).attr("id"));
      d3.select(this).raise();
    }
    
  </script>
</body>

https://d3js.org/d3.v4.min.js