🏠 back to Observable

D3 to Populate Buttons w/ Onclick Function


#1

I am populating a few div with buttons by D3.js.

https://beta.observablehq.com/@askbid/trial

is it a good way for me to follow this approach?

because I am actually stuck and I was wondering if I am trying to do something that has no follow through.


#2

There’s not really any reason to use D3 just to create simple DOM like this. It’s easier to just use HTML tagged template literals with embedded expressions of arrays of elements (typically array.map on your data).

Here’s an explanation of the technique (which uses D3 for other things):

Here’s the idea applied to your notebook:

Our HTML tagged template literals don’t currently let you assign event handlers or escape HTML directly, but you can do that (again) using embedded expressions. In my fork of your notebook, I’m using Object.assign to set the element.textContent and element.onclick.