I have a number of svg groups and each group has a number of children within them.

In case of a click on the group I would like to move all my groups with their children. I would like to know the translate properties of the clicked group, so I can move other groups.

I'm trying to get the translate property, but was unable to get it.

This is what I've tried:

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

I have a number of svg groups and each group has a number of children within them.

In case of a click on the group I would like to move all my groups with their children. I would like to know the translate properties of the clicked group, so I can move other groups.

I'm trying to get the translate property, but was unable to get it.

This is what I've tried:

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

• javascript
• jquery
• svg
• d3.js

2 Answers 2

You can use getAttribute e.g.

this.getAttribute("transform")

or the SVG DOM

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

baseVal.numberOfItems gets you how many ponents there are to the transform and getItem(0).type gets its type i.e. 2 = translate in this case.

This alerts 50, 50 for me on Firefox.

Robert's answer already covers how to solve the problem, but here's the D3 way of doing it in addition. In particular, you can use d3.transform() to parse the value of the transform attribute:

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

Updated jsfiddle here;