d3:如何独立于背景拖动线条元素

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var line = d3.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; });

svg.append("path")
  .datum([{x: 10, y: 10}, {x: 100, y: 100}])
  .attr("d", line)
  .attr("stroke", "black")
  .attr("stroke-width", 2)
  .attr("fill", "none");

var drag = d3.drag()
  .on("start", dragStart)
  .on("drag", dragging)
  .on("end", dragEnd);

svg.select("path")
  .call(drag);

function dragStart() {
  // 拖动开始时的处理逻辑
}

function dragging() {
  // 拖动中的处理逻辑
  var newX = d3.event.x;
  var newY = d3.event.y;
  
  svg.select("path")
    .attr("transform", "translate(" + newX + "," + newY + ")");
}

function dragEnd() {
  // 拖动结束时的处理逻辑
}