27:null 28:["$","title",null,{"children":"D3 coordinates after SVG transform | Christophe Yamahata | Observable"}] 2d:T50e,svg_illustration = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("border", "1.8px solid "+color_highlight) .attr("width", width) .attr("height", height); var circle = svg.append("g").selectAll("circle") .data([delta]) .enter().append("circle") .attr("id", "my_circle") .attr("cx", cx_init) .attr("cy", cy_init) .attr("fill", color_point) .attr("r", 5) .attr("transform", function(d) { return "translate(" + d + ")"; }); svg.selectAll('circle').nodes().forEach(function(node) { mutable coordinates = getElementCoords(node); }); // See also: // https://stackoverflow.com/questions/18554224/getting-screen-positions-of-d3-nodes-after-transform/18561829#answer-18561829 function getElementCoords(element) { let ctm = element.getCTM(); let boundData = d3.select(element).datum(); // Get the bound data let coords = { x: +element.getAttribute('cx') + boundData[0], // Access x coordinate from bound data y: +element.getAttribute('cy') + boundData[1] // Access y coordinate from bound data }; return { x: ctm.e + coords.x * ctm.a + coords.y * ctm.c, y: ctm.f + coords.x * ctm.b + coords.y * ctm.d }; }; return svg.node() }2e:[] 2b:{"id":"9097eb37d56ac6a8","slug":null,"title":"D3 coordinates after SVG transform","thumbnail":"1531d0ba121c1713a988e62dc56d240e35a0eb74d377b4e12c671bfdb7cb362f","access_level":"public","create_time":"$D2024-04-26T08:51:17.619Z","update_time":"$D2024-04-26T13:54:29.810Z","view_time":null,"first_public_time":"$D2024-04-26T18:57:09.411Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":694,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a4317cf9df48c2f1","slug":"sandbox","title":"Sandbox","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"D3 coordinates after SVG transform","cells":[{"id":0,"value":"# D3 coordinates after SVG transform","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":618,"value":"

\n In an SVG, we first create a circle (cx: ${cx_init}, cy: ${cy_init}) and then transform it through a random translation: translate(${delta[0]},${delta[1]}).\n

\n The script effectively retrieves the coordinates of the translated point:\n

x: ${coordinates.x.toFixed(0)}\n
y: ${coordinates.y.toFixed(0)}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"viewof replay = Inputs.button(\"New random point\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":586,"value":"color_highlight = \"darkblue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"color_point = \"#FF0000\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"cx_init = width/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"cy_init = height / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"mutable delta = {\n replay;\n return [ +Array.from({length: 1},d3.randomNormal(0, width/6))[0].toFixed(0), \n +Array.from({length: 1},d3.randomNormal(0, height/6))[0].toFixed(0) ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"mutable coordinates = {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"//d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"