d3 version 7.3.0
    d3主要通过select , selectAll实现选择元素，参照原生js的querySelector querySelectorAll

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>d3</title>
    6.   <script src="https://cdn.bootcdn.net/ajax/libs/d3/7.3.0/d3.js"></script>
    7. </head>
    8. <body>
    9. <div id="root"></div>
    11. <div id="target"></div>
    13. <div class="box">
    14.   <p>111</p>
    15.   <p class="p2">222</p>
    16.   <p ckass="p3">333</p>
    17.   <p ckass="p4">444</p>
    18.   <p ckass="p4">555</p>
    19. </div>
    22. <script>
    23.   const root = d3.select('#root')
    24.   root.text('this is d3')
    26.   // d3.select('p') // 只选择一个
    27.   //   .style('background', '#f90')
    28.   const el = d3.select('p')
    29.     .append('span') // append返回的不是当前dom p，而是子元素
    30.     .text('I am in span'); // 文本添加在span
    31.   console.log('el', el)
    33.   d3.select('body')
    34.     // insert(newElement, targetElement) 返回插入的元素，如果 tatgetElement没有找到，就默认为 body
    35.     .insert('p', '#target') // insert插入
    36.     .text('I am insert new here')
    37.     .style('color', 'pink')
    39.   // d3.selectAll('p') // 选择全部，不需要遍历，直接对整体进行操作
    40.   //   .style('background', '#90f')
    42.   // 删除元素
    43.   // d3.select('#target').remove() //先选中然后直接remove
    45.   // attr,style,text，attr常用来修改svg节点的属性
    47.   let dataset = ['javascript', 'css', 'html']
    48.   d3.select('.box')
    49.     .selectAll('p')
    50.     .data(dataset)
    51.     .text((d, i) =>{
    52.       console.log(100, d, i)
    53.       return  i+ ' : ' + d;
    54.     });
    56. </script>
    57. </body>
    58. </html>