javascript-如何从组中获取翻译属性？

我有多个svg小组,每个小组中都有许多孩子.

如果要单击该组,我想将所有组与他们的孩子一起移动.我想知道单击的组的翻译属性,因此可以移动其他组.

我正在尝试获取翻译属性,但无法获取它.

这是我尝试过的：

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

解决方法:

Robert的答案已经涵盖了如何解决问题,但是这是D3的另一种解决方法.特别是,您可以使用d3.transform()来解析transform属性的值：

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

更新了jsfiddle here;