飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

D3.JS 选择元素

时间:2021-12-07  作者:匿名  

选择是 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>
搜你所爱
D3教程:目录
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。