Mixing html and d3.select

I’m trying to understand in this notebook how to mix d3.select syntax and html ... like syntaxe.

For example to reproduce this html snippet

<li>My name is LI... Bruce LI!  <span onclick="test_Li()"> Test Me.</span></li>
<li>My name is LI... James LI!  <span onclick="test_Li()"> Test Me.</span></li>
<li>My name is LI... Mike LI!  <span onclick="test_Li()"> Test Me.</span></li>

I come up with this first translation
firstNames = ['Bruce', 'James', 'Mike']

translation_one = {

  let lis = firstNames.map(
      let _li_name = `${_firsName} Li`;
      let _li_a = d3.select('a')
      .attr('id', `link-${_li_name.replace(' ', '-')}`)
      .text('Test my foo.')
      .on('click', test_foo);

      let _li = html`<li> My name is Li. ${_li_name}... <span> Test my foo. </span>  </li>`;


      return  _li

  return html`<ul>${lis}</ul>`

and a second one where I find strange to use _groups[0]

translation_two = {
  let lis = d3.selectAll('li')
  .attr('id', d=>`link-${d.replace(' ', '-')}`)
  .text(d=>`My name is LI... ${d} LI ! Test my foo.`)
  .on('click', test_foo);
  return html`<ul>${lis._groups[0]}</ul>`
  //let ul = d3.select('ul')
 //return ul.node()

None are satisfactory… How should I do ?

Here are three approaches I recommend:

1 Like

I missed that notebook. Thank you Mike.

I just wrote it! :grin:

1 Like

Ho ! :o) It’s just perfect.

Thank you very much.