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

您可以使用嵌套的三元运算符来检查边界。

例如，限制x坐标中50和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>

D3有界拖延

1 个答案: