SVGの要素をSVGの範囲外にドラッグできないのはなぜですか？

Question

SVGの要素をSVGの範囲外にドラッグできないのはなぜですか？ SVGのサイズは固定されており、circleをドラッグできます。どのようにSVGの境界から内側の円をドラッグできないようにしますか？

住所：Demo online

それはJSFiddle、おかげでそれを修正するのがベストです！

---

ソースコード：

Javascriptを：

var width = 300, height = 300; 
var color = d3.scale.category10(); 
var radius =16; 

var data = d3.range(20).map(function() { 
    return [ Math.random() * width/2, Math.random() * height/2 ]; 
}); 

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

var drag = d3.behavior.drag() 
    .origin(function(d) {return {x : d[0],y : d[1]};}) 
    .on("dragstart", function(){d3.select(this).attr("r",radius*2);}) 
    .on("drag", drag) 
    .on("dragend",function(){d3.select(this).attr("r",radius);}); 

var nodes=svg.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("transform", function(d) {return "translate(" + 100 + "," + 100 + ")";}) 
    .attr("cx",function(d) { return d[0];}) 
    .attr("cy",function(d) { return d[1];}) 
    .attr("r",radius) 
    .attr("fill", function(d, i) { return color(i);}) 
    .call(drag); 

function drag(d) { 
    d[0] = d3.event.x; 
    d[1] = d3.event.y; 
    d3.select(this).attr("cx", d[0]).attr("cy", d[1]); 
} 

CSS：ドラッグ機能で

svg { border:1px solid #d4d4d5} 

Answer 1

、単に円CXとCYのための最大値と最小値を制約SVGの幅/高さと円の半径に基づく属性：

function drag(d) { 
    d[0] = Math.max(Math.min(d3.event.x,width-100-32),-100+32); 
    d[1] = Math.max(Math.min(d3.event.y,height-100-32),-100+32); 
    d3.select(this).attr("cx", d[0]).attr("cy", d[1]); 
} 

Here's an updated fiddle

-100以前に適用されてきた翻訳を考慮するためです。 32は大きな円の半径（ドラッグ中）です。