D3.JS 选择元素
选择是 D3.js 中的核心概念之一。它基于 CSS 选择器。它允许我们在网页中选择一个或多个元素。此外,它允许我们修改、追加或删除与预定义数据集相关的元素。在本章中,我们将看到如何使用选择来创建数据可视化。
当选择完元素之后你可以添加操作。这些操作可以设置或者获取属性、样式、特性、选择器和文本内容。属性值等可以被指定为常量或者函数;后者为每个元素求值。你也可以为数据选择器加入到data操作;这个数据就可以用做数据驱动的变换的操作符。另外,加上数据产生enter和exit子选择器,你就可以add和remove元素来响应数据中的改变。
选择元素
D3提供了两种高级方法来选择元素:select和selectAll。这些方法接收选择器字符串。前者只返回第一个匹配的元素,后者选择在文档遍历次序中所有匹配的元素。这个方法也可以接受节点,这可以用来和第三方库例如JQuery或者开发工具($0)整合。
d3.select(selector)
选中与指定选择器字符串匹配的第一个元素,返回单元素选择结果。如果当前文档中没有匹配的元素则返回空的选择。如果有多个元素被选中,只有第一个匹配的元素(在文档遍历次序中)被选中。
d3.select(node)
选择指定的节点。如果你已经有一个节点的引用这将是很有用的。例如事件监听器中的d3.select(this) 或者一个全局对象例如document.body。这个函数不会遍历DOM树。
d3.selectAll(selector)
选中匹配指定选择器的所有的元素。这些元素会按照文档的遍历顺序(从上到下)选择。如果当前文档中没有匹配的元素则返回空的选择。
d3.selectAll(nodes)
选择指定的元素数组。如果你已经有了一些元素的引用这将是很有用的,例如事件监听器中的d3.selectAll(this.childNodes),或者一个全局对象例如document.links。节点的参数不用恰好是数组;任何可以转化为一个数组的伪数组(例一个NodeList或者 arguments)都可以,这个函数不会遍历DOM树。
按标签选择
您可以使用其 TAG 选择 HTML 元素。以下语法用于选择“div”标签元素,
d3.select(“div”)
示例
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v5.min.js"></script> </head> <body> <div> Hello World! </div> <script> d3.select("div").text(); </script> </body> </html>
按class名称选择
可以使用以下语法选择使用 CSS 类设置样式的 HTML 元素。
d3.select(“.<class name>”) 示例 <!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v5.min.js"></script> </head> <body> <div class = "myclass"> Hello World! </div> <script> ad3.select(".myclass").text(); </script> </body> </html>
通过 ID 选择
HTML 页面中的每个元素都应该有一个唯一的 ID。我们可以使用元素的这个唯一 ID 使用下面指定的 select() 方法访问它。
d3.select(“#<id of an element>”) <!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id = "hello"> Hello World! </div> <script> d3.select("#hello").text(); </script> </body> </html>