本文旨在展示如何在 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'));
虽然现在这不是很复杂,但我们可以预期事情会变得更加困难,随着我们规模化而变得更加困难。
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);
再次,当我们要创建复杂数据可视化时,这并不是最好的工作流程。
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 的更多信息。