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>