d3.js - D3js : ":last is not a valid selector"?

Question

d3.select('.activity:last') 和 d3.selectAll('.activity:last') 均失败。同时; $('.activity:last') 有效。

d3.selectAll('.activity:last')
  .append('<div class="hook-table">Table comes here</div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
  <div class="activity"></div>
  <div class="activity"></div>
  <div class="activity"></div>
  <div class="activity"></div>
  <div class="activity"></div>
</div>

是否有 D3 方法来传递 :last 选择器。

Answer 1

:last 不是有效的 css 选择器。它可以与 jQuery 一起使用，因为 jquery 添加了对此选择器的支持:

:last is a jQuery extension and not part of the CSS specification (docs)

由于 D3 仅考虑有效的 CSS 选择器字符串，因此 :last 不适用于 D3。

相反，您需要更多代码才能获取最后一个元素。

如果您的 div 是其同级中的最后一个，那么您可以使用 :last-child:

d3.select(".container").select(".activity:last-child")
  .text("5: This div selected");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>


<div class="container">
  <div class="activity"><p>1</p></div>
  <div class="activity"><p>2</p></div>
  <div class="activity"><p>3</p></div>
  <div class="activity"><p>4</p></div>
  <div class="activity"><p>5</p></div>
</div>

但是，如果最后一个 div 下面还有另一个元素，这将不起作用。上面将选择类为“activity”的 div，它是 .container 的最后一个子级(请参阅 MDN )。

对于更复杂的结构，其中最后一个带有“activity”类的 div 或元素不是最后一个同级元素，您需要采取更复杂的方法。