Как перемещать элементы вместе с svg group

Question

У меня есть круг, который добавляется при перетаскивании. Я хочу круг, чтобы двигаться вместе с группой, когда я переместить группу вокруг с помощью мыши

Вот что я пытался, не работает:

//targetG is the group element 

targetG.append("rect") 
         .attr("fill", "none") 
         .style("stroke", "black") 
         .style("stroke-width", "2px") 
         .attr("width", 200) 
         .attr("height", 200) 
         .style("fill", "white") 
         .call(
           d3.behavior.drag() 
           .on('drag', moveRect).origin(function() { 
          var t = d3.select(this); 
          return {x: t.attr("x"), y: t.attr("y")}; 
         })); 

Вот полный код в скрипкой: http://jsfiddle.net/vk62y7un/

Answer 1

Существует несколько небольших проблем, которые необходимо устранить.

---

Ваш переводной компонент разложения разделов разбивается на.

translate = (translate.substring (0, translate.indexOf (")"))). Split (",");

Хотя это работает в Chrome, оно должно быть разделено пробелом для IE.

translate = (translate.substring(0, translate.indexOf(")"))).split(","); 
if (translate.length === 1) 
    translate = translate[0].split(' '); 

Круг не прикреплялся к g из-за этого.

---

Ваше (контейнерное) событие перетаскивания прикрепляется к прямоугольнику внутри g. Это должно быть привязано к g вместо этого. Соответственно функции перетаскивания должны манипулировать атрибутом transform (translate), а не x и y.

var targetG = svg.append("g") 
     .attr("transform", "translate(150,150)") 
     .call(
     d3.behavior.drag() 
     .on('drag', moveRect).origin(function() { 
     ... 

и

function moveRect() { 
    d3.select(this) 
      .attr('transform', 'translate(' + d3.event.x + ' ' + d3.event.y +')'); 
} 

---

Происхождение (для г теперь) должно быть (разобран) преобразование (перевод) атрибут в начале перетаскивания.

 .... 
     var tc = d3.select(this).attr('transform').replace(/[a-z()]/g, '').split(' '); 
     if (tc.length === 1) 
      tc = tc[0].split(',') 
     return { x: Number(tc[0]), y: Number(tc[1]) }; 
    })); 

Обратите внимание: проверка === 1 и разделение - это то, что он работает в IE и Chrome.

---

Fiddle (работает в IE и Chrome) - http://jsfiddle.net/3hyu6om8/

Answer 2

Проблема заключается в том, когда вы пытаетесь перетащить прямоугольник не выбрать круги. Я внес некоторые изменения, и вы можете перетаскивать круги по прямоугольнику.

Добавить эту часть кода:

var groupAll = d3.behavior.drag() 
     .origin(Object) 
     .on("drag", function(d, i) { 
     var child = this; 
     var move = d3.transform(child.getAttribute("transform")).translate; 
     var x = d3.event.dx + move[0]; 
     var y = d3.event.dy + move[1]; 
     d3.select(child).attr("transform", "translate(" + x + "," + y + ")"); 

     }); 

here Полный код.