Document

# How d3 can get the transform attribute of the dataset **URL:** \ **Category:** Help\ **Created:** [May 3, 2022, 2:59pm UTC](https://talk.observablehq.com/t/how-d3-can-get-the-transform-attribute-of-the-dataset/6516 "2022-05-03T14:59:13Z")\ **Posts on this page:** 5\ **Page:** 1

**Author:** ![smpa01](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/smpa01/32/5352_2.png) [@smpa01](https://talk.observablehq.com/u/smpa01)\ **Post date:** [May 3, 2022, 2:59pm UTC](https://talk.observablehq.com/t/how-d3-can-get-the-transform-attribute-of-the-dataset/6516/1 "2022-05-03T14:59:13Z")

I am working with a svg element which has few `g` elements. The basic markup is following ```auto Document ``` I want to create a `rect` forEach `g` element with fixed `x,y,height,width` but want to grab the transform property from each `g` element and pass on to each `rect` . If I use vanilla javascript, I can achieve the task as follows ```auto Document ``` It generates this ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/514fc4a6208f6616a0aca89dbd05827a61960062.png) ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/b/bff5f1f697442d7bfd5604cbbc126be334406fb8.png) How can I achieve the same using d3? So far, I tried this which did not work. ```auto Document ``` Thank you in advance. ---

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\ **Post date:** [May 4, 2022, 12:24am UTC](https://talk.observablehq.com/t/how-d3-can-get-the-transform-attribute-of-the-dataset/6516/2 "2022-05-04T00:24:30Z")

I put that into an Observable notebook. [question https://talk.observablehq.com/t/how-d3-can-get-the-transform-attribute-of-the-dataset/6516 / Brett Cooper / Observable](https://observablehq.com/d/d4d3fdd4d07b4558) The line of code, `attr('transform', (d, i) => { return `${d.attr(‘transform’)}` });` is looking at the wrong data. d is not a selection and it also doesn’t need to be inside a template literal. ` .attr('transform', (d, i) => d.getAttribute('transform') )` d is an html object, so you only need to request the attribute you need. ---

**Author:** ![smpa01](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/smpa01/32/5352_2.png) [@smpa01](https://talk.observablehq.com/u/smpa01)\ **Post date:** [May 4, 2022, 10:58am UTC](https://talk.observablehq.com/t/how-d3-can-get-the-transform-attribute-of-the-dataset/6516/3 "2022-05-04T10:58:34Z")

@hellonearthis thanks for looking into this. I got away with > .attr(‘transform’, (d, i) =\> { const dataset = d3.selectAll(“[class^=smGrp]”); const transform = dataset[‘\_groups’][0][i].getAttribute(‘transform’); return transform }) But your’s is definitely better. I got tripped with `attr` which is equivalent to `setAttribute` and `getAttribute` probably has no `d3` equivalent. ---

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\ **Post date:** [May 4, 2022, 12:16pm UTC](https://talk.observablehq.com/t/how-d3-can-get-the-transform-attribute-of-the-dataset/6516/4 "2022-05-04T12:16:16Z")

You could read the attribute with D3 but it would require a select `d3.select('svg > g.smGrp0').attr('transform')` ---

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [May 4, 2022, 12:32pm UTC](https://talk.observablehq.com/t/how-d3-can-get-the-transform-attribute-of-the-dataset/6516/5 "2022-05-04T12:32:41Z")

You can access the current element via `this`, or via the entire collection: ```auto // this .attr('transform', function(d) { return d3.select(this).attr('transform'); // or return this.getAttribute('transform'); }) // collection .attr('transform', (d, i, nodes) => d3.select(nodes[i]).attr('transform')) ``` Read more in the [d3-selection documentation](https://github.com/d3/d3-selection). While you’re there, be sure to also take a look at the docs for _`selection`_`.each()`.