Saya baru mengenal d3.js. Saya diberitahu oleh dokumentasi bahwa .selectAll "Memilih semua elemen yang cocok dengan string pemilih yang ditentukan". Tetapi ketika saya mencoba menggunakand3.selectAll("p").selectAll("b")untuk mendapatkan semua belemen dalam kode html di bawah ini, elemen b terakhir tidak dipilih:

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

enter image description here

Dapatkah seseorang memandu saya melalui ini? Terima kasih!

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>
3
Dave Mak 26 Mei 2021, 18:11

1 menjawab

Jawaban Terbaik

Elemen p tidak boleh berisi elemen h4. p hanya dapat berisi konten frasa , seperti elemen b. Dalam kasus Anda, tag h4 menutup p:

Tag akhir dapat dihilangkan jika <p> elemen segera diikuti oleh ... <h4>, ... (sumber )

Jadi b ketiga Anda tidak ada di dalam p sama sekali. Itulah sebabnya Anda tidak dapat memilihnya sebagai anak dari p. Anda dapat mencoba dua elemen p, dengan h4 di antaranya, atau Anda dapat menggunakan span dengan gaya yang sesuai:

<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>
5
Andrew Reid 26 Mei 2021, 16:00