d3.js - how to place interactive button control with d3 charting library? -

d3.js - how to place interactive button control with d3 charting library? -

i'm on project has requirement create info visualization. more info visualization, there're tricky interactive requirements.

imagine scatter plot, instead of little circles, clickable rectangles(like button) placed on chart. when user clicks on buttons, rectangles turns input fields, user can type create inputs.

how draw these buttons , input fields d3.js?

after doing research, root of problem : how set html in svg? there's plenty of questions , answers out there. solution utilize svg element: foreighobject. refer question: insert html code within svg text element

d3.js