D3.js在HTML列表和子列表上的嵌套數據連接

Question

該小提琴http://jsfiddle.net/kaxjL3La/顯示了我嘗試修改D3 general update pattern以使用嵌套的<ul><li> HTML列表。我相信使這種情況複雜化的是，我正在尋求在外部和內部列表中使用相同的標籤，這與網絡上的示例不同，例如tr/td或g/circle。

解釋在字的小提琴：我想號的列表被放置在一個無序列表，與具有一些導出的值的子列表中的每個號碼：

function update(arr) { 
    var globalList = d3.select("#lst"); 

    var data = globalList.selectAll("li").data(arr, function(d) { return d; }); 
    data.exit().remove(); 
    var list = data.enter().append('li').text(
     function(d, i) { return "[" + i + "]=" + d; }); 
    var subList = list.selectAll("ul") 
         .data(function(d) { return [ d/10, d/100 ]; }) 
         .enter() 
         .append("ul") 
         .append("li") 
         .text(function(d, i) { return "[" + i + "]=" + d; }); 
} 

第一更新（生成步驟）工作正常，但後續調用update導致子列表消失爲更新元素（update()，即30之間調用相同的數字）。如果您在撥打remove()之前添加console.log(data.exit())，您會看到selectAll("li").data(...)調用與子列表相匹配，然後這些子列表將被刪除。

如果我省略子列表中的<li>標記，並且只有<ul>標記的序列，如update2()，那麼在更新時我不會丟失子列表。就我的數據連接和數據驅動顯示而言，這是正確的行爲，但如果有包含我的列表元素的<ul>標記序列，這不是一個好的HTML！我只是表明了這一點，以確認如果子列表包含selectAll()未捕獲的標籤，我會得到正確的行爲。

我的問題是：我該如何防止D3的selectAll從遞歸併找到globalList選擇的所有<li>後代，這樣我可以在子列表使用<ul><li>標籤？

Answer 1

閱讀https://stackoverflow.com/a/14438376/500207後，我可以通過分配外列表的<li>標籤的自定義CSS類，像outer，然後調用selectAll("li.outer")做到這一點。

function update(arr) { 
    var globalList = d3.select("#lst"); 

            // v----v note 1 (of 2) 
    var data = globalList.selectAll("li.outer").data(arr, function(d) { return d; }); 
    data.exit().remove(); 
    var list = data.enter().append('li').text(
     function(d, i) { return "[" + i + "]=" + d; }) 
          .classed('outer', true); // <--- note 2 (of 2) 
    var subList = list.selectAll("ul") 
         .data(function(d) { return [ d/10, d/100 ]; }) 
         .enter() 
         .append("ul") 
         .append("li") 
         .text(function(d, i) { return "[" + i + "]=" + d; }); 

這真的是最好的事情嗎？