d3.js Метод selectAll не выбирает все элементы?

#javascript #html #d3.js

Вопрос:

Я новичок в d3.js. В документации мне сказано, что .selectAll «Выбирает все элементы, соответствующие указанной строке селектора». Но когда я пытаюсь использовать d3.selectAll("p").selectAll("b") , чтобы получить все b элементы в приведенном ниже html-коде, последний элемент b не выбран :

 <p>
    <b>selected</b>
    <b>selected</b>
    <h4>some word</h4>
    <b>not selected</b>
</p>

может кто-нибудь рассказать мне об этом? Спасибо!

 var selection = d3.selectAll("p").selectAll("b");

console.log("b elements selected: ", selection.size());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p>
        <b>selected</b>
        <b>selected</b>
        <h4>some word</h4>
        <b>not selected</b>
    </p>

1. Правильно, вы выбираете все p, а затем все b внутри каждого из них. Попробуйте select(p).selectAll(b) выбрать 1-й p и все b внутри него

2. @somallg спасибо, но я пробовал select(p).selectAll(b) , и все равно последний элемент b не выбран…

Ответ №1:

p Элемент не может содержать h4 элемент. A p может содержать только содержимое фразы, например b элемент. В вашем случае h4 тег закрывает p :

Конечный тег может быть опущен, если за элементом <p> сразу следует символ … <h4>, … (источник)

Так что ваш третий b вообще не находится внутри p «а». Вот почему вы не можете выбрать его в качестве дочернего элемента p . Вы можете попробовать два p элемента, с h4 промежуточным, или вы можете использовать a span с соответствующими стилями:

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

<p>
    <b>selected</b>
    <b>selected</b>
</p>
    <h4>some word</h4>
<p>
    <b>not selected</b>
</p>

<script>
var selection = d3.selectAll("p").selectAll("b");

console.log(selection.size());


</script>

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

<p>
    <b>selected</b>
    <b>selected</b>
    <span>some word</span>
    <b>not selected</b>
</p>

<script>
var selection = d3.selectAll("p").selectAll("b");

// for demonstration as all `b` elements are in the first `p` element.
var selection2 = d3.select("p").selectAll("b");


console.log(selection.size());
console.log(selection2.size());


</script>