在使用d3可重用图表模式时，如何实现分派事件时的拖动(d3v5 +)？

// 导入d3库文件
<script src="https://d3js.org/d3.v5.min.js"></script>

// 创建SVG画布
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建一个圆形元素
var circle = svg.append("circle")
  .attr("cx", 250)
  .attr("cy", 250)
  .attr("r", 50)
  .style("fill", "red");

// 创建拖动行为
var drag = d3.drag()
  .on("start", dragstart)
  .on("drag", dragging)
  .on("end", dragend);

// 绑定拖动事件
circle.call(drag);

// 定义拖动事件的行为
function dragstart() {
  console.log("拖动开始");
}

function dragging() {
  var x = d3.event.x;
  var y = d3.event.y;
  circle.attr("cx", x)
    .attr("cy", y);
}

function dragend() {
  console.log("拖动结束");
}