Как получить перевод собственности из группы?

Question

У меня есть несколько групп svg, и каждая группа имеет в них несколько детей.

В случае click на group Я хотел бы переместить все свои группы вместе со своими детьми. Я хотел бы знать свойства translate группы clicked, поэтому я могу перемещать другие группы.

Я пытаюсь получить имущество translate, но не смог его получить.

Это то, что я пробовал:

var svg = d3.select('body').append('svg').attr({width:300,height:300});  
var group = svg.append('svg:g').attr({ 
    'width':100, 
    'height':100, 
    'transform' : 'translate(50, 50)' 
}); 

group.append('circle').attr({'r':30}); 

group.on('click', function() { 
    console.log(this); //how to get the translated properties? 
}); 

Jsfiddle

Answer 1

Ответ Роберта уже охватывает вопрос о том, как решить проблему, но вот способ D3 сделать это дополнительно. В частности, вы можете использовать d3.transform() разобрать значение атрибута transform:

var t = d3.transform(d3.select(this).attr("transform")); 
console.log(t.translate); 

Обновлено jsfiddle here;

Answer 2

Вы можете использовать GetAttribute например,

this.getAttribute("transform") 

или SVG DOM

this.transform.baseVal.getItem(0).matrix.e + ", " + this.transform.baseVal.getItem(0).matrix.f) 

baseVal.numberOfItems получает вас сколько компонентов есть для преобразования и getItem(0).type получает свой тип т.е. 2 = перевод в этом случае.

This оповещения 50, 50 для меня на Firefox.