在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>