D3拖动模糊/抖动控制柄

var rectHeight = 80, rectWidth = 100, maxWidth = 200;
var svg = d3.select("svg");

var brect = svg.append("g")
  .attr("id", "brect");

brect.append("rect")
  .attr("id", "dataRect")
  .attr("width", rectWidth)
  .attr("height", rectHeight)
  .attr("fill", "green");

var handleResizeGroup = brect.append("g")
  .attr("id", "handleResizeGroup")
  .attr("transform", `translate(${rectWidth})`)
  .call(d3.drag()
    .on("start", dragStarted)
    .on("drag", dragged)
    .on("end", dragEnded));

function dragStarted() {
  d3.select(this.previousSibling).classed("active", true);
}

function dragEnded() {
  d3.select(this.previousSibling).classed("active", false);
}

function dragged(d) {
  var h = d3.select(this);
  var r = d3.select(this.previousSibling);
  var currWidth = r.attr("width");

  var t = (d3.event.x >= 0 && d3.event.x <= maxWidth) ? d3.event.x : currWidth;

  r.attr("width", t);
  h.attr("transform", `translate(${t})`)
}

handleResizeGroup.append("path")
  .attr("fill-opacity", 0)
  .attr("stroke-opacity", 0)
  .attr("stroke", "grey")
  .attr("cursor", "ew-resize")
  .attr("d", resizePath);

handleResizeGroup.append("rect")
  .attr("id", "resizeRect")
  .attr("width", "8")
  .attr("fill-opacity", 0)
  .attr("cursor", "ew-resize")
  .attr("height", rectHeight)
  //.attr("pointer-events", "all")
  .on("mouseover", function(){
    d3.select(this.previousSibling)
      .attr("stroke-opacity", "100%");
  })
  .on("mouseout", function() {
    d3.select(this.previousSibling)
      .attr("stroke-opacity", "0");
  });

function resizePath(d) {
  var e = 1,
    x = e ? 1 : -1,
    y = rectHeight / 3;
  return "M" + (.5 * x) + "," + y
    + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6)
    + "V" + (2 * y - 6)
    + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y)
    + "Z"
    + "M" + (2.5 * x) + "," + (y + 8)
    + "V" + (2 * y - 8)
    + "M" + (4.5 * x) + "," + (y + 8)
    + "V" + (2 * y - 8);
}

rect.active {
  stroke-width: 1;
  stroke: rgb(0,0,0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width=1200 height=500></svg>