D3 Playground

HTML

<script src="http://d3js.org/d3.v5.min.js"></script>
<svg class='area'></svg>

JavaScript

function onHandlerDrag() {
  return (d) => {
    console.log(d3.event.y);
   }
}

var scaleX = d3
      .scaleLinear()
      .domain([0, 500])
      .range([0, 500]);

var scaleY = d3
      .scaleLinear()
      .domain([0, 500])
      .range([0, 500]);

var svgGraph = d3
      .select('.area')
      .attr('width', 500)
      .attr('height', 500);
      
  var circle1 = svgGraph
      .append('circle')
      .attr('cx', scaleX(20))
      .attr('cy', scaleY(20))
      .attr('r', 15)
      .call(d3.drag()
        .on('start', (d) => { })
        .on('drag', onHandlerDrag())
        .on('end', (d) => { }));
        
    var circle2 = svgGraph
      .selectAll('.circle2')
      .data([{ x: 3, y: 2 }])
      .enter()
      .append('circle') // Uses the enter().append() method
      .attr('cx', scaleX(100))
      .attr('cy', scaleY(100))
      .attr('r', 15)
      .call(d3.drag()
        .on('start', (d) => { })
        .on('drag', onHandlerDrag())
        .on('end', (d) => { }));