d3 выбрать элементы, не имеющие идентификатора

Question

У меня есть следующий DOM

<g id="s1s2" class="contact"> 
    <g class="baseCircle"> 
     <path id="s1s2_base"> 
    </g> 
    <path > 
    <path > 
</g> 

, и я хотел бы получить все пути, которые не имеют идентификатора. Я попытался

d3.select('g#s1s2.contact').selectAll('path:not(id)'); 

, который возвращает все пути:

[[path#s1s2_base, path, path]] 

Любое предложение?

Answer 1

Ваш селектор немного выключен. Чтобы выбрать все элементы, не имеющие атрибута id, вы можете использовать "path:not([id])". Обратите внимание, как это использует дополнительные квадратные скобки, указывающие, что это фактически attribute selector.

console.log(d3.selectAll("path:not([id])").size()); // 2

<script src="https://d3js.org/d3.v4.js"></script> 
 

 
<svg> 
 
    <g id="s1s2" class="contact"> 
 
     <g class="baseCircle"> 
 
      <path id="s1s2_base"/> 
 
     </g> 
 
     <path /> 
 
     <path /> 
 
    </g> 
 
</svg>

Answer 2

Вы должны изменить id в идентификатор элемента, который вы не хотите, чтобы выбрать:

d3.select('g#s1s2.contact').selectAll('path:not(#s1s2_base)'); 

Answer 3

В D3, то .attr() функция без второго аргумента может быть использован в качестве добытчика.

Таким образом, выберите все <path> и отфильтруйте их, удалив те, у кого есть удостоверение личности. В этом случае,

!d3.select(this).attr("id") 

Вернется true для таких путей.

var noId = d3.selectAll("path").filter(function() { 
 
    return !d3.select(this).attr("id") 
 
}); 
 

 
console.log(noId.attr("class"));

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
\t <path id="foo" class="hasID"></path> 
 
\t <path id="bar" class="hasID"></path> 
 
\t <path class="noID"></path> 
 
\t <path id="baz" class="hasID"></path> 
 
</svg>

PS: как С.О. фрагмент замерзает при попытке сделать console.log выбор D3, вот скрипка с тем же кодом: https://jsfiddle.net/n615hqub/