Mixing html and d3.select

1

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

html`<ul>
<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>
</ul>`

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

translation_one = {

  let lis = firstNames.map(
    function(_firsName){
      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>`;

      _li.append(_li_a.node());

      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')
  .data(firstNames)
  .join('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')
  //ul.append(lis.node()[0]);
 //return ul.node()
}

None are satisfactory… How should I do ?

2

Here are three approaches I recommend:

1 Like
3

I missed that notebook. Thank you Mike.

4

I just wrote it! :grin:

1 Like
5

Ho ! :o) It’s just perfect.

Thank you very much.