javascript - 将多个项目拖动到 d3 中的另一个项目内

Question

我在一个矩形中有三个圆圈。每当我拖动矩形时，所有三个圆圈都应该与我的矩形一起移动。但是，每当我移动其中一个圆圈时，该特定圆圈就应该移动。其他圆形和矩形不应移动。

我不知道该从哪里开始。我知道如何拖动单个圆圈或多个圆圈，但不知道如何执行此操作。有什么想法吗？

Answer 1

试试这个代码。

var w = 200, h = 200;
var drag = d3.behavior.drag().on('dragstart',function(){
  d3.event.sourceEvent.stopPropagation();
}).on("drag", function() {       
    var x = d3.event.x,
    y = d3.event.y;
    if(this.tagName=='circle'){
      if(x<=w-10 && x>=10 && y<=h-10 && y>=10)
      d3.select(this).attr("cx",x).attr("cy",y);
    }else
      d3.select(this).attr("transform","translate("+x+","+y+")");
});;
var container = d3.select('body').append("svg").attr("width",1200).attr("height",600);
var group = container.append("g")
var rect = group.append("rect").attr("width",w).attr("height",h).attr("x",10).attr("yx",10);
var circle1 = group.append("circle").attr("cx",50).attr("cy",50).attr("r",10).style("fill","red");
var circle2 = group.append("circle").attr("cx",100).attr("cy",70).attr("r",10).style("fill","red");
circle1.call(drag);
circle2.call(drag);
group.call(drag);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>