d3單獨或按組拖動元素

Question

我在組內有幾個矩形，當拖動外部矩形時，我希望它們在組中移動，但我也應該可以單獨移動內部矩形，我可以這是分開的，但我不能讓他們在同一時間工作。這裏是fiddle。誰可以幫我這個事？

<svg width="500" height="500" style="background-color: red"> 
    <g class="big"> 
     <rect class="sqr" height="200" width="400" x="40" y="40" style="fill:blue"></rect> 
     <rect class="sqr" height="50" width="50" x="100" y="100" initial-x="100" initial-y="100" style="fill:green"></rect> 
     <rect class="sqr" height="50" width="50" x="250" y="100" initial-x="100" initial-y="100" style="fill:green"></rect> 
    </g> 
</svg> 



<script> 

    var drag = d3.behavior.drag().on('drag', function(d){ 
     d3.select(this).attr('transform', 'translate('+(d3.event.x)+','+(d3.event.y)+')'); 
    }); 

    var sqDrag = d3.behavior.drag().on('drag', function (d) { 
     console.log('sqr dragging..'); 
     d3.select(this).attr('x', d3.mouse(this)[0]).attr('y',d3.mouse(this)[1]); 
    }); 

    var g = d3.select('.big').call(drag); 

    var r = d3.selectAll('.sqr').on('mousedown', function() { 
     console.log('sqr clicked'); 
     d3.event.stopPropagation(); 
    }).call(sqDrag); 

</script> 

Answer 1

只需修改sqDrag功能

var sqDrag = d3.behavior.drag().on('drag', function (d) { 
    console.log('sqr dragging..'); 
    var id = d3.select(this).attr('id'); 
    if (id === null) 
     d3.select(this).attr('x', d3.mouse(this)[0]).attr('y',d3.mouse(this)[1]); 
    else { 
     var parent = d3.select(this); 
     var dx = d3.mouse(this)[0] - parent.attr('x'); 
     var dy = d3.mouse(this)[1] - parent.attr('y'); 

     parent.attr('x', d3.mouse(this)[0]).attr('y',d3.mouse(this)[1]); 

     d3.selectAll("." + id).attr('x', function() { 
      return Number(d3.select(this).attr('x')) + dx; 
     }).attr('y', function() { 
      return Number(d3.select(this).attr('y')) + dy; 
     }); 
    } 
}); 

---

小提琴 - https://jsfiddle.net/46ag2x2z/