保持在形状 D3 内拖动 - ReactJS

Question

我正在尝试使用d3 处理可拖动的形状，并特别关注this link 和其他一些人，我能够得到这样的东西；

    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        radius = 32;

    var circles = d3.range(20).map(function() {
      return {
        x: Math.round(Math.random() * (width - radius * 2) + radius),
        y: Math.round(Math.random() * (height - radius * 2) + radius)
      };
    });

    var color = d3.scaleOrdinal()
        .range(d3.schemeCategory20);
        
    var circleGroup = svg.selectAll('g')
      .data(circles)
      .enter().append('g')
      .attr('transform',function(d) { return 'translate('+d.x+','+d.y+')'; })
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));

    circleGroup.append("circle")
        .attr("r", radius)
        .style("fill", function(d, i) { return color(i); })

    circleGroup.append("text")
       .text(function(d,i) { return i; })
       .style('text-anchor','middle')
       .attr('y',4);


    function dragstarted(d) {
      d3.select(this).raise().classed("active", true);
    }

    function dragged(d) {
      d3.select(this).attr("transform","translate("+(d.x = d3.event.x)+','+(d.y = d3.event.y)+')' );
    }

    function dragended(d) {
      d3.select(this).classed("active", false);
    }

.svgClass{
border:2px solid red;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
    <svg width="500" height="300" class="svgClass"></svg>

但现在我想将这个拖动保持在svg 边界内，但不知道我该怎么做？谁能帮我解决这个问题？？

Answer 1

更新您的 dragged() 函数以强制在翻译效果中使用 ma​​x 和 min 授权值。

function dragged(d) {
    const
    xMax = width - radius,
    yMax = height - radius

    const x =
    d3.event.x < radius ? radius
    : d3.event.x > xMax ? xMax
    : d3.event.x

    const y =
    d3.event.y < radius ? radius
    : d3.event.y > yMax ? yMax
    : d3.event.y

    d3.select(this).attr("transform","translate("+(d.x = x)+','+(d.y = y)+')' );
}

  var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height"),
      radius = 32;

  var circles = d3.range(20).map(function() {
    return {
      x: Math.round(Math.random() * (width - radius * 2) + radius),
      y: Math.round(Math.random() * (height - radius * 2) + radius)
    };
  });

  var color = d3.scaleOrdinal()
      .range(d3.schemeCategory20);

  var circleGroup = svg.selectAll('g')
    .data(circles)
    .enter().append('g')
    .attr('transform',function(d) { return 'translate('+d.x+','+d.y+')'; })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  circleGroup.append("circle")
      .attr("r", radius)
      .style("fill", function(d, i) { return color(i); })

  circleGroup.append("text")
     .text(function(d,i) { return i; })
     .style('text-anchor','middle')
     .attr('y',4);


  function dragstarted(d) {
    d3.select(this).raise().classed("active", true);
  }

  function dragged(d) {
    const
      xMax = width - radius,
      yMax = height - radius

    const x =
      d3.event.x < radius ? radius
      : d3.event.x > xMax ? xMax
      : d3.event.x

    const y =
      d3.event.y < radius ? radius
      : d3.event.y > yMax ? yMax
      : d3.event.y

    d3.select(this).attr("transform","translate("+(d.x = x)+','+(d.y = y)+')' );
  }

  function dragended(d) {
    d3.select(this).classed("active", false);
  }

.svgClass{
  border:2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

<svg width="500" height="300" class="svgClass"></svg>