Accessing attributes from a d3 viz in Observable

Community Help
1

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.

2

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 = d3.select('#c0').attr('cx')
4

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

1 Like