d3js starter 1

by glam

HTML

<html>

  <head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
  </head>

  <body>
    <ul id="my-list">
      <li></li>
      <li></li>
    </ul>

    <button type="button" onclick="javascript:remove()">
      del 2 from list
    </button>
  </body>

</html>

JavaScript

var data = [3, 4, 12, 5, 9, 2, 2, 6];

d3.select('#my-list')
  .selectAll('li')
  .data(data)
  .text(function(du) {
    return 'This is the pre-cretaed li element ' + du;
  })
  .enter()
  .append('li')
  .text(function(d) {
    return 'this is additional li from d3 ' + d;
  })

function remove() {
  d3.selectAll('li')
    .data(data)
    .exit([3, 4, 12, 5, 9, 2, 6])
    .remove();
}