javascript - D3.js HTML 列表和子列表上的嵌套数据连接

Question

这个 fiddle http://jsfiddle.net/kaxjL3La/显示我尝试调整 D3 general update pattern使用嵌套<ul><li> HTML 列表。我相信使这种情况变得复杂的是，我正在寻求在外部和内部列表中使用相同的标签，这与网络上的 tr/td 示例不同。或g/circle .

用文字解释 fiddle :我希望将一个数字列表放置在无序列表中，每个数字都有一个带有一些派生值的子列表:

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)。如果添加console.log(data.exit())之前remove()打电话，你会看到 selectAll("li").data(...)调用已匹配子列表，该子列表将被删除。

如果我省略 <li>子列表中的标签，并且只有 <ul> 序列标签，如update2() ，那么我不会在更新时丢失子列表。就我的数据连接和数据驱动显示而言，这是正确的行为，但具有 <ul> 序列并不是好的 HTML。包含我的列表元素的标签!我仅显示此内容以确认子列表是否包含 selectAll() 未捕获的标签。 ，我得到了正确的行为。

我的问题是:如何防止 D3 的 selectAll通过递归并查找所有 <li> globalList的后代选择器，以便我可以使用 <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; });

这真的是最好的做法吗？