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