html - 在 d3 中选择深层元素

Question

所以对于我的问题，您可以引用 udacity.com 主页。

我正在尝试访问页面中间某处的文本 - “The Udacity Difference”。我试过这个:

d3.select("div.banner-content.h2.h-slim")
d3.select("div.banner-content.h-slim")

以上均无效。因此，我尝试查看此页面的开发工具元素部分。然后我可以悬停并看到:div.banner-content 有更进一步

{div.container
      {div.row
          {div.col-xs-12 text-center
              {h2.h-slim}}}}

然后我想好吧，如果我至少能得到“容器”，我应该尝试一下，但即便如此

d3.select("div.banner-content.div.container")

或

d3.select("div.banner-content.container")

不工作!!!!

逻辑错在哪里？

Answer 1

您可以使用 d3 的链式语法查找嵌套元素，如下所示。

HTML:

 <div class="banner-content">
    <div class="container">
        <h2 class="h-slim">Header</h2>
    </div>
</div>

代码:

d3.select("div.banner-content").select("div.container").select("h2.h-slim")

编辑:不需要输入这么长的语法。只需要使用空格分隔选择器。

d3.select("div.banner-content div.container h2.h-slim")

在这种情况下，下面的代码也会为您提供相同的结果。如有必要，您可以专门添加标签。

d3.select("div.banner-content .container .h-slim")