2f: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() }30:[] 2d:{"title":"D3 coordinates after SVG transform","cells":[{"id":0,"value":"# D3 coordinates after SVG transform","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":567,"value":"viewof replay = Inputs.button(\"New random point\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":586,"value":"color_highlight = \"darkblue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"color_point = \"#FF0000\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"cx_init = width/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"cy_init = height / 2","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":46,"value":"mutable coordinates = {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"//d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}