保持在形状 D3 内拖动 - ReactJS

Question

我正在尝试使用可拖动形状d3并通过专门关注此链接以及其他一些链接，我能够得到这样的东西；

    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边界内，但不知道我该怎么做？？谁能帮我解决这个问题？？