Published unlisted
Edited
May 4, 2022
Insert cell
# question https://talk.observablehq.com/t/how-d3-can-get-the-transform-attribute-of-the-dataset/6516
Insert cell
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<g class="smGrp0" opacity="0" transform="translate(0.5,0)">
</g>
<g class="smGrp1" opacity="1" transform="translate(101.33333333333333,0)">
</g>
<g class="smGrp2" opacity="1" transform="translate(202.16666666666666,0)">
</g>
<g class="smGrp3" opacity="1" transform="translate(303,0)">
</g>
</svg>

Insert cell
{
const dataset = d3.selectAll("[class^=smGrp]");

d3.select('svg').selectAll('smGrp').data(dataset).enter()
.append('rect')
.attr('x', '0')
.attr('y', '0')
.attr('height', `670`)
.attr('width', `110`)
.style('fill', 'none')
.style('stroke', 'black')
.attr('transform', (d, i) => d.getAttribute('transform') )

}
Insert cell
d3.select('svg > g.smGrp0').attr('transform')
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more