D3有界的拖動

Question

我所擁有的是一個SVG（大約300px）內的可拖動行。我的目標是限制線路移動的距離，因此它不會超出我的SVG。我約一小時使用d3，所以任何幫助表示讚賞。

我試過使用一些if語句，但他們都沒有工作。這是我的代碼：

var svg = document.getElementById("probabilityDensitySVG"); 
var drag = d3.behavior.drag() 
    .on('dragstart', null) 
    .on('drag', function(d){ 
var dx = d3.event.dx; 
var dy = d3.event.dy; 
var x1New = parseFloat(d3.select(this).attr('x1'))+ dx; 
var y1New = parseFloat(d3.select(this).attr('y1')); 
var x2New = parseFloat(d3.select(this).attr('x2'))+ dx; 
var y2New = parseFloat(d3.select(this).attr('y2')); 
line.attr("x1",x1New) 
.attr("y1",y1New) 
.attr("x2",x2New) 
.attr("y2",y2New); 
}).on('dragend', function(){ 
}); 

var line = d3.select(svg) 
    .append("line") 
    .attr("x1",100) 
    .attr("y1",143) 
    .attr("x2",100) 
    .attr("y2",370) 
    .attr("stroke-width",5) 
    .attr("stroke","black") 
    .call(drag); 

Answer 1

您可以使用嵌套三元運算符來檢查邊界。

例如，限制50，並在x 300之間的拖拽座標：

x1New = dx > 300 ? 300 : dx < 50 ? 50 : dx; 

這裏是演示（我使用的d3.event.x代替d3.event.dx）：

var svg = d3.select("svg") 
 
var drag = d3.behavior.drag() 
 
    .on('dragstart', null) 
 
    .on('drag', function(d) { 
 
    var dx = d3.event.x; 
 
    x1New = dx > 300 ? 300 : dx < 50 ? 50 : dx; 
 
    line.attr("x1", x1New) 
 
     .attr("x2", x1New); 
 
    }).on('dragend', function() {}); 
 

 
var line = svg.append("line") 
 
    .attr("x1", 100) 
 
    .attr("y1", 10) 
 
    .attr("x2", 100) 
 
    .attr("y2", 90) 
 
    .attr("stroke-width", 5) 
 
    .attr("stroke", "black") 
 
    .call(drag);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg width="350" height="100"></svg>