操作 DOM

d3 提供了 d3.select 和 d3.selectAll 两个 API，根据 CSS 选择器来选取 DOM 节点。但是它们返回的并不是真正的 DOM 节点，而是会对 DOM 做一层封装

对于 DOM 节点上的一些 API，d3 也提供了对应的镜像版本：

D3上手_d3

下面的代码会在 ​​<svg></svg>​​ 标签中绘制一个圆：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>D3 test</title>
  <style>
    * {
      user-select: none;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/d3/3.1.6/d3.min.js"></script>

  <script>
    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;
    var svg = d3.select('body').append('svg').attr('width', width).attr('height', height);

    svg
      .append('circle')
      .attr('cx', 60)
      .attr('cy', 60)
      .attr('r', 30)
      .append('text')
      .text('资源节点');
  </script>
</body>

</html>

我们只绘制了一个圆，我们需要对数据（圆心坐标，半径）进行一个集中定义，然后在圆里面添加文本。生成的代码就是下面这样。

<svg width="1464" height="858"><circle cx="60" cy="60" r="30"><text>资源节点</text></circle></svg>

除了绘制一个，我们可以通过数组的形式进行批量的绘制。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>D3 test</title>
  <style>
    * {
      user-select: none;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/d3/3.1.6/d3.min.js"></script>

  <script>
    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;
    var svg = d3.select('body').append('svg').attr('width', width).attr('height', height);


    const circleData = [
      {
        cx: 30,
        cy: 30,
        r: 30,
        nodeName: '节点1'
      },
      {
        cx: 30,
        cy: 100,
        r: 30,
        nodeName: '节点2'
      }
    ];
  svg
    .selectAll('circle')
    .data(circleData)
    .enter()
    .append('circle')
    .attr('cx', d => d.cx)
    .attr('cy', d => d.cy)
    .attr('r', d => d.r)
    .append('text')
    .text(d => d.nodeName);
  </script>
</body>

</html>

我们使用了 d3.selectAll 选中所有 circle 元素；
使用了 data 来为元素绑定数据，相当于将选中的元素做了一次遍历，给每个元素增加一个 data 属性；
enter 我们暂且不管，后面再说；
attr，text 都使用了函数形式来指定设置的值。函数的入参就是单个元素所绑定的数据。

​​https://zhuanlan.zhihu.com/p/100144393​​