D3.js 嵌套数据连接 HTML 列表和子列表答案

【问题标题】：D3.js nested data joins on HTML lists and sub-listsD3.js 嵌套数据连接 HTML 列表和子列表
【发布时间】：2014-09-01 04:58:12
【问题描述】：

这个 Fiddle 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> 标记？

【问题讨论】：

标签： javascript html d3.js jquery-selectors html-lists

【解决方案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; });

这真的是最好的做法吗？

【讨论】：