score:0
Accepted answer
I didn't look too closely at the linked question or your current calculations. Instead, I think the calculations can be simplified to:
function getElementCoords(element) {
// translate on node
var trans = d3.transform(d3.select(element).attr('transform')).translate,
// transform on parent "zoom" container
transFormParent = d3.transform(d3.select(element.parentNode).attr('transform')),
// translate on zoom container
transParent = transFormParent.translate,
// scale on zoom container
scaleParent = transFormParent.scale,
// final position of node
pos = {
x: trans[0] + transParent[0]/scaleParent[0],
y: trans[1] + transParent[1]/scaleParent[1]
};
return pos;
}
Call it as:
function click(d) {
console.log(getElementCoords(this));
}
Updated fiddle.
EDITS
@Christian pointed out in the comments, my math was off, should have been:
function getElementCoords(element) {
// translate on node
var trans = d3.transform(d3.select(element).attr('transform')).translate,
// transform on parent "zoom" container
transFormParent = d3.transform(d3.select(element.parentNode).attr('transform')),
// translate on zoom container
transParent = transFormParent.translate,
// scale on zoom container
scaleParent = transFormParent.scale,
// final position of node
pos = {
x: trans[0] * scaleParent[0] + transParent[0],
y: trans[1] * scaleParent[1] + transParent[1]
};
return pos;
}
Source: stackoverflow.com
Related Query
- How to determine if D3 tree node falls outside SVG container
- How to add an image to an svg container using D3.js
- clicking a node in d3 from a button outside the svg
- how to display name of node when mouse over on node in collapsible tree graph
- How to determine nearby SVG elements on a mouse event?
- How to center a svg in a div container
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- How to remove node on tree layout D3.js?
- How do I save an svg node to a file using nodejs?
- d3 Tree - How to auto adjust node spacing when zooming
- How to place a label in an area outside of an SVG path?
- Using d3.behavior.drag, How to keep a drag image visible outside of the svg element
- How to show only specific node level in d3 tree layout
- How do I move an svg node from one group to another?
- How do I prevent node text to move away or not overlap on my tree in D3.js?
- How to render svg in backend and save to local using in node js using d3?
- How to implement collapsible tree structure using svg g
- How can I get the dom svg element from d3 node data?
- How to give a class for all descendants of a tree node
- How to determine a SVG shape based off of data using d3.js
- How can I scale an SVG so that the content drawn in it to fit the container size?
- How do I delete a D3 tree node using code?
- How to assign a unique id to a node in d3 collapsible tree
- How to add progress bar inside a tree structure node or on mouse hover in D3
- How to make SVG container window responsive?
- How to position path to node center in tree layout
- How to connect a node to a d3 tree after dragging it
- How to select an existing SVG container in D3 without creating that container using D3?
- how to use getElementById with getBBox to determine the svg width and height
- In d3.js how to vary the node size of tree diagram
More Query from same tag
- Appending d3.js to div from within a PHP class
- d3 zoom behaviour is overwriten by mousemove event
- How do I create a multiline chart using d3js with json formatted for nvd3?
- How do I used D3 to force a user click on a circle object inside of a g.node object?
- d3js radial tidy tree - how are dx and dy populated?
- How to add pagination in table using d3?
- Text-Wrapping in D3
- Integrating Vaadin with D3
- Draggable line chart in R/Shiny
- D3 decennial time scale ticks with data formatted as years
- D3JS chart: Hovering on some transitioning elements while others are still transitioning too stops the execution of the chart animation
- how to send a json object from index.js to html in node.js
- D3 charting tool: Cannot display labels above columns in bar chart
- D3 CSV Column Space Parsing
- How to override the inline style by applying a new class in D3
- d3.js Zoom & Pan Timeline - How to Show Dynamic Timeline Range?
- outputing array variables javascript
- Crossfiltering using textboxes
- Dragging force layout nodes by dragging their labels
- Dimple JS - Removing gap between the y-axis and the chart
- d3 stacked bar chart values not showing up on chart
- problems updating d3 map with slider
- brush in multiline chart is working for only one line
- D3 colour gradient not forming mathematical circle around centre of area
- How can I allign the top of two SVG's next to another?
- D3js not rendering chart properly: Everything shows up as a line
- d3.js: Expand multiple paths in tree layout
- D3 toggle stacked to grouped on multiple bar charts
- Correct way to parse this JSON and use it with D3
- d3: position text element dependent on length of element before