score:6
I think I was able to solve the problem myself. The access to the transformation matrix could be achieved using
circ1[0][0].getCTM()
or by using
circ1[0][0].getScreenCTM()
By adding the value of the e attribute to the x coordinate and the value of the f attribute to the y coordinate I was able to get the "absolute position" of the elements.
Updated jsfiddle is here
I am afraid my solution is not universally valid. For example I am not sure what happens in a case I will use transform: scale before the computation of the position ?
Source: stackoverflow.com
Related Query
- How can I convert SVG coordinates (x,y) defined relatively to an element into absolute coordinates/position?
- How to combine coordinates into one svg element in D3?
- How can I pass attributes of an SVG element to a new event in D3?
- How to convert latitude and longitude into (x,y) coordinates using d3.js
- How can I convert an svg to d3.js code?
- How can I get the dom svg element from d3 node data?
- How to convert JSON into something that d3.js can work with
- How can I animate the top of my svg element like in this gif using d3.js?
- How can I set the background color of a svg element which contains a D3 heat map?
- how to convert d3.html result into element to append?
- In D3, how can I receive current X,Y coordinates of an element while a transition is running?
- How to manually convert point features to SVG coordinates
- D3 How can i replace a SVG element
- D3 - How can I put an SVG into a DIV via a function?
- How can I toggle the value of an svg text element with D3.js when user clicks the text?
- How can I remove or replace SVG content?
- How to access the DOM element that correlates to a D3 SVG object?
- How to get coordinates of an svg element?
- How do I get the width of an svg element using d3js?
- d3 click coordinates are relative to page not svg - how to translate them (Chrome error)
- d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
- How to convert a jQuery object into a d3 object?
- how to assign unique id to SVG text element in d3 javascript
- D3js : How to convert svg text to path?
- Fit Text into SVG Element (Using D3/JS)
- How do you make an SVG element mouse event bubble up through another element?
- Can I move an SVG element between SVG groups, in d3.js
- How can I dynamically resize an SVG rect based on text width?
- how can I exclude an element from an Angular scope?
- Can I append a literal SVG element with d3?
More Query from same tag
- How to increase width and height of plotly area graph
- D3plus options having no effect on chart
- dc.js: extending line and area to end of chart
- Python equivalent of D3.js
- D3 Stacked Bar Chart add Data Labels and solving D3 Label Placement
- Conditionally change background image of D3 circles
- d3.js sunburst with dynamically built updatable data structure
- Wrapping every five svg elements in a div with D3.js
- SVG text (with tspans) vertical offset
- D3 reusable chart tootip follows wrong chart when update
- Dynamic loading of external library fails
- D3 zoom event firing on drag in Angular
- D3.js exit() not seeming to get updated information
- D3 axis not show
- How to draw arc with d3.js with only outer radius, or sector of circle?
- ember-cli Unclosed element `d.y` causing ember app to crash
- D3 Force Layout Variable Repulsive Foces
- Wrong values returned for x(i) when using time scale in D3.js
- D3 filtering root data from flare.csv for treemap
- Line chart axis zoom
- How do you add rotation logic for mobile devices upon dragging on a 3d globe with D3.js and html canvas
- Code doesn't work when upgrading from v3 to v5
- Why do transitions flicker/stutter when applied in a separate function (D3)
- d3 basic append example not working
- D3.js Barchart: getting x-axis labels to line up with bars, and rotate them slightly
- d3 Network with Multiple Links in the Same Direction
- D3 x axis not showing all data
- How to add another axis in a parallel coordinate plot in d3
- Having trouble panning and zooming on my d3 map
- d3.js zoomable circle packing: change radius for specific circles
