Accessing attributes from a d3 viz in Observable

I am interested in continually accessing the attributes of dynamic svg elements (such as a rect) in a d3 visualization created in Observable.

Outside of observable this would be as simple as using document.getElementById().getAttribute(); and a setInterval from the rendered d3 visualization. But d3 visualizations in Observable return an svg.node(). I am new to JS and couldn’t figure out how to parse through the node to get the attributes i was interested in.

To elaborate more on my use case. I am interested in using the position of d3 svg elements (e.g. points on a graph) to dynamically control the frequency of an oscillator in Tone.js. Specifcally I am interested in tracking the position of points as they move through a transition() in d3 and feeding that constantly changing number into the frequency value of an oscillator.

Thank you for your help.

In D3 you select the item you want to read the attribute on and then instead of parsing a value to the attribute you pass nothing and that returns that attributes value.

let cx0 ='#c0').attr('cx')

Awesome thank you so much! This is exactly what i was looking for. Your notebook is very helpful as well.

1 Like