Блог

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 селектор.

:last недопустимый селектор css. Он работает с jQuery, потому что jquery добавил поддержку этого селектора:

:last является расширением jQuery и не является частью спецификации CSS (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. В приведенном выше примере будет выбран div с классом «activity», который является последним дочерним элементом .container (см. MDN).

Для более сложных структур, где последний div или элемент с классом «activity» не является последним родственным, вам нужно будет использовать более сложный подход.