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

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

 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <title>D3: Selections</title>
 5  </head>
 6  <body>
 7    <div class="about-me">
 8      <p>Hi! My name is Paul and here's some facts about me.</p>
 9      <ul id="list">
10        <li>I'm a powerlifter</li>
11        <li>I'm studying MSc Data Science</li>
12        <li>I love D3.js!</li>
13      </ul>
14    </div>
15
16    <script src="https://d3js.org/d3.v5.min.js"></script>
17    <script src="main.js"></script>
18  </body>
19</html>

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

1const listItems = [...document.getElementsByTagName('li')];
2
3listItems.map(item => item.style.setProperty('font-weight', 'bold'));

vanilla JavaScript DOM selection

虽然现在这不是很复杂,但我们可以预期事情会变得更加困难,随着我们规模化而变得更加困难。

D3的选择

注意,当我们想操纵 DOM 中的多个元素时,我们不得不对它们进行地图。D3选项允许我们查询页面上的一个或多个元素,并允许我们操纵整个选项,而无需对我们进行迭代。

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

我们也可以从DOM中选择元素:

select()从 DOM 中取出一个元素. 如果有多个匹配,则只取出第一个元素。

例子

让我们用一个代码示例来看看这一点,就像我们的瓦尼拉JavaScript示例一样,可以在一行中完成:

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

正如你所看到的,它返回了一组元素,我们可以链接到其他方法,如风格。

如果我们将此更改为选择而不是选择All,你会注意到我是一个强力提升者是唯一的li被鼓舞 - 这是预计的,因为它是DOM中的第一个li。

添加一个新列表项目

为了进一步展示选择的力量,我们可以考虑如何使用JavaScript添加一个新的li 到DOM:

1const ul = document.getElementsByTagName('ul')[0];
2
3const newItem = document.createElement('li');
4
5newItem.appendChild(document.createTextNode(`I'm learning about selections.`));
6
7ul.appendChild(newItem);

Screenshot: Appending an element

再次,当我们要创建复杂数据可视化时,这并不是最好的工作流程。

1const ul = d3.select('ul');
2
3ul.append('li').text(`I'm learning about selections`);

每个函数返回以前的更改或查询的更新值,使我们能够以强大的方式链接方法。

选择下

让我们通过从我们的ul选择中选择第一个li来看看,并将其变成红色:

1const ul = d3.select('ul');
2
3ul.select('li').style('color', 'red');
4
5ul.append('li').text(`I'm learning about selections`);

正如你所看到的,我们不仅仅局限于初始选择,我们可以继续进行子选择,并更具体地了解我们的实施。

选择看起来是什么样子?

让我们使用console.log检查我们的选择查询,看看返回的内容:

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

如果我们将_groups扩展到selectAll('li'),则_groups将返回包含在NodeList(3)中的li集合的Array。

1const li = d3.selectAll('li');
2
3console.log(li);

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

当然,_parents 对象包含此选择的母体,而 root 对象是html。

现在就这样了! 继续阅读有关使用 D3.js 的更多信息。