D3.js：了解选择并与VanillaJavaScript进行比较

本文旨在展示选择如何在 D3 中工作。我们将从一个基本项目开始，其中包含 d3.js 作为没有构建系统的脚本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>D3: Selections</title>
  </head>
  <body>
    <div class="about-me">
      <p>Hi! My name is Paul and here's some facts about me.</p>
      <ul id="list">
        <li>I'm a powerlifter</li>
        <li>I'm studying MSc Data Science</li>
        <li>I love D3.js!</li>
      </ul>
    </div>

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

考虑一下我们如何在没有 D3 的情况下进行选择和修改 DOM 元素：

const listItems = [...document.getElementsByTagName('li')];

listItems.map(item => item.style.setProperty('font-weight', 'bold'));

虽然现在这不是很复杂，但我们可以预期，随着我们的扩展，事情会变得越来越难推理。这就是我们需要考虑 D3 的原因。

D3 中的选择

请注意，当我们想要操作 DOM 中的多个元素时，我们必须对它们进行映射。 D3 选择允许我们查询页面上的一个或多个元素，并允许我们操作整个选择而不需要我们进行迭代。

它使用标准的 CSS 选择器语法，因此您可以期望通过元素的名称、具有 .about-me 的类、具有 #list 的 id 等来查询元素。

我们可以从 DOM 中选择元素：

select() 从 DOM 中获取 one 元素。如果有多个匹配项，则只取第一个匹配项。
selectAll() 从 DOM 中获取 all 元素。

例子

让我们用一个代码示例来看看这个。可以在一行中完成与我们的 vanilla JavaScript 示例相同的操作：

const li = d3.selectAll('li').style('font-weight', 'bold');

如您所见，它返回一个元素集合，我们可以将这些元素链接到其他方法中，例如 style。

如果我们将其更改为 select 而不是 selectAll，您会注意到 I'm a powerlifter 是唯一一个加粗的 li - 这是预期的，因为它是DOM 中的第一个 li。

附加一个新的列表项

为了进一步展示选择的力量，考虑一下我们可能希望如何使用 JavaScript 向 DOM 添加一个新的 li ：

const ul = document.getElementsByTagName('ul')[0];

const newItem = document.createElement('li');

newItem.appendChild(document.createTextNode(`I'm learning about selections.`));

ul.appendChild(newItem);

再一次，当我们想要创建复杂的数据可视化时，这并不是最好的工作流程。让我们看一下 D3 的相同示例：

const ul = d3.select('ul');

ul.append('li').text(`I'm learning about selections`);

容易多了！每个函数都返回先前更改或查询的更新值，使我们能够以一种强大的方式将方法链接在一起。

子选择

我们还可以在我们的选择中选择项目。让我们通过从我们的 ul 选择中选择第一个 li 并将其变为红色来看看这个：

const ul = d3.select('ul');

ul.select('li').style('color', 'red');

ul.append('li').text(`I'm learning about selections`);

如您所见，我们不仅限于初始选择。我们可以继续进行子选择并更具体地了解我们的实施。

选择是什么样的？

让我们使用 console.log 来检查我们的 select 查询以查看返回的内容：

{
  _groups: [Array(1)]
  _parents: [html]
}

如果我们展开 _groups，您会看到它根据选择返回我们的 ul。如果我们将选择更改为 selectAll('li')，则 _groups 返回一个 Array，其中包含 NodeList(3) 内的 li 集合。

const li = d3.selectAll('li');

console.log(li);

_groups: Array(1)
  0: NodeList(3)
    0: li
    1: li
    2: li
_parents: [html]

自然，_parents 对象包含此选择的父对象，即根 html 对象。

现在就是这样！请继续关注有关使用 D3.js 的更多信息。