d3 выберите элемент с именем класса, который содержит строку - PullRequest
Новая
       7

d3 выберите элемент с именем класса, который содержит строку

1 голос
/ 19 марта 2020

Вот ряд путей. каждый путь имеет конец, который заканчивается либо _before или _ после . 

<svg>
   <g>
      <path class= "my-class-before" ...></path>
   </g>
   <g>
      <path class= "my-class-before" ...></path>
   </g>
   <g>
      <path class= "my-class-after" ...></path>
   </g>
   <g>
      <path class= "my-class-after" ...></path>
   </g>
</svg>

Как выбрать пути, заканчивающиеся _before? 

const beforeSelected = ""; ///How to select element with class that ends  with **_before**.
const bedoreAreas = d3
        .selectAll(beforeSelected)
        .transition()
        .style('opacity', 1);

Спасибо за помощь

1 Ответ

2 голосов
/ 19 марта 2020

Из документации :

Методы выбора принимают W3 C селектор строки

которые вы можете использовать в вашем случае селектор атрибута , используйте $, чтобы указать, чем должен заканчиваться атрибут, например: 

const befor = d3
        .selectAll("[class$='-before']")
console.log(befor.size());

const after = d3
        .selectAll("[class$='-after']")
console.log(after.size());
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
<svg>
   <g>
      <path class= "my-class-before"></path>
   </g>
   <g>
      <path class= "my-class-before"></path>
   </g>
   <g>
      <path class= "my-class-after"></path>
   </g>
   <g>
      <path class= "my-class-after"></path>
   </g>
</svg>
...