如何在d3中限制可拖动区域？

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

var draggable = svg.append("rect")
  .attr("x", 50)
  .attr("y", 50)
  .attr("width", 100)
  .attr("height", 100)
  .style("fill", "blue")
  .call(d3.drag()
    .on("drag", dragHandler));

function dragHandler() {
  var x = d3.event.x;
  var y = d3.event.y;
  
  // 在这里添加限制条件，例如限制在特定的区域内
  if (x < 0) {
    x = 0;
  }
  if (x > 400) {
    x = 400;
  }
  if (y < 0) {
    y = 0;
  }
  if (y > 400) {
    y = 400;
  }
  
  d3.select(this)
    .attr("x", x)
    .attr("y", y);
}