d3.js - dragmove circle with v6 not work as expected - d3.js

Question

I am learning this v3 example code and it works fine, but after modify it for v6, I got it running but the second time move the same circle coordinate will not match the mouse position any more!
console.clear()
console.log("======")
//connect_arrow()
drag_move()
function drag_move() {
var w = 600,
h = 400,
r = 25;
var data = [{x: 50, y: 50}, {x: 150, y: 150} ];
var drag = d3.drag();
//drag.subject(Object)
drag.on('start', dragstart)
drag.on('end', dragend)
drag.on('drag', dragmove)
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h)
.style('border','2px solid');
d3.select("body")
.append("div")
.attr("id", "circle_id")
.text("Circle ID: ");
d3.select("body")
.append("div")
.attr("id", "x_var")
.text("X: ");
d3.select("body")
.append("div")
.attr("id", "y_var")
.text("Y: ");
d3.select("#circle_id")
.append("span")
.attr("id", "circle_id_text");
d3.select("#x_var")
.append("span")
.attr("id", "x_coord");
d3.select("#y_var")
.append("span")
.attr("id", "y_coord");
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('r', r)
.attr('cx', (d)=> d.x)
.attr('cy', (d)=> d.y)
.attr('id', (d,i)=> ("circle_" + i))
.call(drag);
// Functions
var circle;
var circleID;
function dragstart(d){
circle = d3.select(this);
if (circle.attr('id') === 'circle_0'){
circle.style('fill','red');
} else {
circle.style('fill', 'blue');
}
}
function dragend(d){
d3.select('#circle_id_text')
.text(null);
d3.select('#x_coord')
.text(null);
d3.select('#y_coord')
.text(null);
d3.select(this)
.style('fill','black');
}
function dragmove(d,event){
circle = d3.select(this);
circleID = circle.attr('id');
d.x = Math.max(r, Math.min(w-r, event.x))
d.y = Math.max(r, Math.min(h-r, event.y))
d3.select('#circle_id_text').text(circleID);
d3.select('#x_coord').text(d.x);
d3.select('#y_coord').text(d.y);
circle.attr('cx',d.x).attr('cy',d.y)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

Answer 1

dragmove parameter should be (event,d), not (d,event)!
console.clear()
console.log("======")
//connect_arrow()
drag_move()
function drag_move() {
var w = 600,
h = 400,
r = 25;
var data = [{x: 50, y: 50}, {x: 150, y: 150} ];
var drag = d3.drag();
//drag.subject(Object)
drag.on('start', dragstart)
drag.on('end', dragend)
drag.on('drag', dragmove)
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h)
.style('border','2px solid');
d3.select("body")
.append("div")
.attr("id", "circle_id")
.text("Circle ID: ");
d3.select("body")
.append("div")
.attr("id", "x_var")
.text("X: ");
d3.select("body")
.append("div")
.attr("id", "y_var")
.text("Y: ");
d3.select("#circle_id")
.append("span")
.attr("id", "circle_id_text");
d3.select("#x_var")
.append("span")
.attr("id", "x_coord");
d3.select("#y_var")
.append("span")
.attr("id", "y_coord");
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('r', r)
.attr('cx', (d)=> d.x)
.attr('cy', (d)=> d.y)
.attr('id', (d,i)=> ("circle_" + i))
.call(drag);
// Functions
var circle;
var circleID;
function dragstart(d){
circle = d3.select(this);
if (circle.attr('id') === 'circle_0'){
circle.style('fill','red');
} else {
circle.style('fill', 'blue');
}
}
function dragend(d){
d3.select('#circle_id_text')
.text(null);
d3.select('#x_coord')
.text(null);
d3.select('#y_coord')
.text(null);
d3.select(this)
.style('fill','black');
}
function dragmove(event,d){
circle = d3.select(this);
circleID = circle.attr('id');
d.x = Math.max(r, Math.min(w-r, event.x))
d.y = Math.max(r, Math.min(h-r, event.y))
d3.select('#circle_id_text').text(circleID);
d3.select('#x_coord').text(d.x);
d3.select('#y_coord').text(d.y);
circle.attr('cx',d.x).attr('cy',d.y)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>