时间戳

首页 > 解决方案 > d3 js中的selectAll（）也可以将css样式作为参数吗？

javascript - d3 js中的selectAll（）也可以将css样式作为参数吗？

问题描述

我是 javascript 和 d3 的新手。在处理几个示例时，我遇到了一些这样的行： var legend = svg.selectAll(".legend")

我在为散点图创建图例时看到了这一点。这是此链接中接受的解决方案的一部分

  1. 为什么我们将 .legend 作为参数？
  2. .legend 是 CSS 样式吗？
  3. 一般来说，我们可以将什么都作为参数传递给 selectAll()？

我已经制定了这些示例（Scott Murray 的教程），但我仍然对 selectAll 的工作原理感到困惑。任何指导/解释/阅读链接都非常感谢。

标签： javascriptcssd3.js

解决方案

d3.selectAll（选择器）

选择与指定选择器字符串匹配的所有元素。将按文档顺序（从上到下）选择元素。如果文档中没有元素与选择器匹配，或者选择器为 null 或未定义，则返回空选择。例如，要选择所有段落：

var 段落 = d3.selectAll("p");

1）在你的例子中，.legend是一个类选择器。它作为参数传递selectAll给匹配所有具有 . 类的 DOM 元素legend。

2) .legend本身不是 CSS 样式。但它可以在 CSS 中用作选择器，将一些样式属性应用于匹配所述选择器的元素。

3) selectAll只接受一个参数：选择器字符串。那可能只是"p"，也可能是".content .items > li"。

看看下面我们如何使用 CSS 和 D3 来应用不同的样式。 

d3.selectAll(".highlight")
  .style({
    "color": "green"
  })
nav a {
  color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<nav>
  <ul>
    <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
    <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
    <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare" class="highlight">Morbi</a></li>
    <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
    <li><a href="#nowhere" title="Pellentesque fermentum dolor" class="highlight">Pellentesque</a></li>
  </ul>
</nav>

推荐阅读