Yuvalanmış bir katmana öğeleri ekleme

Question

Bir araya getirdiğim bir svg yığılmış grafik için iç içe bir katman içinde bir rect eklemeye çalışıyorum. Ben aşağıdakilere sahip olan

başlatmak için:

DOM <g class="someclass"><g></g></g> kılan

layers = svg.selectAll('g.layer') 
    .data(stacked, function(d) { 
     return d.dataPointLegend; 
    }) 
    .enter() 
    .append('g') 
    .attr('class', function(d) { 
     return d.dataPointLegend; 
    }); 

layers.selectAll('g.layer') 
    .data(function(d) { 
     return d.dataPointValues; 
    }) 
    .enter() 
    .append('g'); 

Sonra yapmak istiyorum ne dataPointValues koleksiyonunda her bir veri noktası için ve bir rect ve text öğesi.

I

layers.selectAll ('g.layer') .Data (fonksiyonu (d) { geri d.dataPointValues; }) çalıştılar .enter() .Append ('rect '); Ben

<g class="someclass"><g></g><rect></rect></g> 

ile bitirmek beri bildiğim

İstediğim

<g class="someclass"><g><rect></rect></g></g> 

Yani

ikinci seviye katman eklerken, nasıl bir sonraki seviye rect eleman eklerim olduğunu yanlıştır ?

Bu, iç içe geçme gibi görünebilir, ancak her veri noktasının onu temsil eden bir veya çok öğeye sahip olabileceğinden veri noktası başına bir katman istiyorum.

Teşekkürler

Answer 1

İstediğiniz şeyi elde etmek için çok yakınsınız. Eksik olan tek şey, layers için başka bir değişken kullanmaktır. Eğer yaptığı gibi tam olarak,

Birincisi, dış grup oluşturmak için: İşte snippet'tir

var innerLayers = layers.selectAll("g.layer") 
     .data(/*whatever*/) 
     .enter() 
     .append("g"); 

:

var layers = svg.selectAll("g.layer") 
     .data(/*whatever*/) 
     .enter() 
     .append("g"); 

Sonra yerine tekrar layers kullanmak yerine, başka bir değişken oluşturmak Bu gruplar içindeki grupları oluşturur. Ve son olarak, biz rects eklemek innerLayers kullanın:

innerLayers.selectAll(".rects") 
     .data(/*whatever*/) 
     .enter() 
     .append("rect"); 

bu şekilde yaparak, istediğini vardır:

<g class="someclass"><g><rect></rect></g></g>