D3限定ドラッグ

Question

私が持っているものは、SVG（約300px）の中のドラッグ可能なラインです。私の目的は、SVGの外に出ないように行の移動距離を制限することです。私はd3を使用することに約1時間ですので、どんな助けもありがとうございます。

私はいくつかの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

境界をチェックするためにネストされた三項演算子を使うことができます。例えば

、X座標で50と300間ドラッグを制限：

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>

：ここ

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

デモ（I代わりd3.event.dxのd3.event.xを使用している）であります