Clever Geek Handbook

How do I get a transfer of property from a group?

I have multiple svg groups and each group has multiple children in them.

In the case click

on group

I would like to move all of my group with their children. I would like to know the properties of the translate

group clicked

, so I can move other groups around.

I am trying to get a property translate

but couldn't get it.

Here's 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

+3


source to share


2 answers


Robert's answer already covers how to fix the problem, but here's D3's way of doing it additionally. In particular, you can use d3.transform()

to parse the value of an attribute transform

:

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


Updated jsfiddle here ;

+2


source


You can use getAttribute for example.

this.getAttribute("transform")

or SVG DOM



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

baseVal.numberOfItems gets you how many components there are to convert and getItem (0) .type gets its type ie 2 = translate in this case.

This warns 50, 50 for me in Firefox.

+1


source






More articles:


All Articles