d3v4 - zoom and drag circles - drag adjusted for zoom

Example of zoom and drag in d3 v4.

This example has a modified drag function so that when you zoom in, you're still able to drag the circles to the correct mouse location. Here's an example of the drag problem.

forked from puzzler10's block: d3v4 - zoom and drag circles - drag adjusted for zoom

forked from Thanaporn-sk's block: d3v4 - zoom and drag circles - drag adjusted for zoom

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<svg width="800" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
  
//used to capture drag position    
var start_x, start_y;     
      
//create some circles at random points on the screen 
//create 50 circles of radius 20
//specify centre points randomly through the map function 
var radius = 20;
var circle_data = d3.range(50).map(function() {
    return{
        x : Math.round(Math.random() * (width - radius*2 ) + radius),
        y : Math.round(Math.random() * (height - radius*2 ) + radius)
    }; 
});

//stylish black rectangle for sexy looks 
var rect = svg.append("g")
    .attr("class", "rect")
    .append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "#7accff")
    ;
    
//funky yellow circles   
var circles = d3.select("svg")
	.append("g")
	.attr("class", "circles")
	.selectAll("circle")
        .data(circle_data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {return(d.x)})
        .attr("cy", function(d) {return(d.y)})
        .attr("r", radius)
        .attr("fill", "#ff7080");       
       
/* 
 * DRAG BEHAVIOUR         
 */

//create drag handler with d3.drag()
var drag_handler = d3.drag()
    .on("start", drag_start)
    .on("drag", drag_drag);

//specify what to do when zoom event listener is triggered 
function zoom_actions(){
  circles.attr("transform", d3.event.transform);
}

//add zoom behaviour to the svg element backing our graph.  
//same thing as svg.call(zoom_handler); 
zoom_handler(svg);

</script>

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