d3.select() neden dizi dizisini döndürüyor?

Question

Kısa bir süre önce, SVG'leri değiştirmek için bazı komut dosyaları yazmak üzere d3.js'u kullanmaya başladım. Bu yüzden çoğu zaman d3 belgelerine başvurup çözümü buluyorum. Ancak, neden d3.select işlev dizisini dizi dizisini döndürdüğünü anlayamıyorum. Örneğin, bir SVG öğem var ve d3.select("svg") yaparsanız, [[svg]] döndürür, bu yüzden d3.select("svg")[0] yapmak zorundayım. oldukça tek boyutlu bir dizilim yerine, her seçme elemanlarının dizilerinin bir dizidir: belgeler

bir nüans seçimleri gruplandırılır olmasıdır söylüyor. Bu subselections ait hiyerarşik yapısını korur

Sonra çoğu zaman bunu görmezden söylüyor.

1. Neden dizi dizisini döndürüyor?

2. ne anlama Bu subselections hiyerarşik yapısını korur

geliyor?

Şimdiden teşekkürler.

Answer 1

Nesnenin d3.select dönüşünün dahili olarak nasıl yapılandırıldığını bilmeniz veya önemsememeniz gerekir. Bilmeniz gereken tek şey, bu nesnede hangi yöntemlerin erişilebilir olduğudur. büyüklüğü 2, tek bir d3 seçim nesnesi her <div> elemanı için size d3.selectAll

var div = d3.selectAll("div"); 

div tüm <div> unsurları seçerseniz

<div> 
    <span>1</span> 
    <span>2</span> 
</div> 
<div> 
    <span>3</span> 
    <span>4</span> 
</div> 

:

bu belgeyi var ki belgesi.

Şimdi bir arama div seçimdeki her elemente elemanları eşleştirmek için yapılır

var span = div.selectAll("span"); 

bu seçim nesneden Alt Seçim oluşturmak ve yapı korunur Ama eğer - yani span seçimi olacak temel aldığı div seçimi ile aynı sayıda öğe içerir ve bunların her biri o öğede bulunan öğelerden oluşur.

Yani bu durumda, span (ikinci 3, birinci ve 4'te 1 ve 2) iki eleman içeren, her biri (<div> birinci ve <div> saniye) iki seçim, ihtiva edecektir.

select'a gelince, bir eşleşme bulduktan sonra durması dışında selectAll ile aynıdır; Bununla birlikte, dönüş tam olarak aynı şekilde yapılandırılmıştır.

Demo