{
const boxHeight = 300;
const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]);
let offset = { x: 0, y: 0 };
function dragStart() {
offset.x = d3.event.x - d3.select(this).attr('cx');
offset.y = d3.event.y - d3.select(this).attr('cy');
}
function drag() {
d3.select(this)
.attr('cx', d3.event.x - offset.x)
.attr('cy', d3.event.y - offset.y);
}
svg
.append('circle')
.attr('cx', width / 2)
.attr('cy', boxHeight / 2)
.attr('r', 50)
.style('fill', 'green')
.call(
d3
.drag()
.on('start', dragStart)
.on('drag', drag)
);
return svg.node();
}