Javascript 使用d3的嵌套jQuery手风琴

我在尝试使用d3嵌套jQuery手风琴时遇到了一个令人沮丧的问题。问题似乎源于似乎无法（或至少很难）尝试递归地创建如下html结构，并使用d3的嵌套和数据绑定机制：

<div>
    <h1>        // accordion 1 header
    <div>       // accordion 1 content
        <h1>           // nested accordion header
        <div>          // nested accordion content            
        </div>
    </div>
    <h1>        // accordion 2 header
    <div>       // accordion 2 content
    </div>
</div>

其中，“hmtlFun”是一个预计算的函数数组，用于生成给定嵌套密钥级别的内容。这段代码可以很好地生成html结构，比如

<div>
    <div> 
        <div>                      
        </div>
    </div>
</div>

---

任何帮助/建议（与解决方案相关）都将提前得到高度赞赏：^）

对于任何感兴趣的人，这里有一个基于简单的深度优先遍历nestDFT（不包括在内）的有效解决方案，它在遍历过程中遇到的每个嵌套节点上调用nestNodeFilter。需要注意的是，d.unid是指在运行nestDFT之前为每个嵌套节点生成的“唯一节点id”

function nestNodeFilter(rootDiv, d){
        var node        = d,
            container   = d3.select(rootDiv);
        if(h==0 && d.values == undefined){ // nest root
        } else if(d.values != undefined && Array.isArray(d.values)) {
            node        = d.values;
            container   = d3.select('#div_'+d.unid);
        } else if(!Array.isArray(d.values)){
            // generate leaf content at bottom of nest
            return
        }
        node.forEach(function(d){
            this.append("h1")
                .attr('id','h1_'+d.unid)
                .text(accordFuns[h](d));
            this.append("div")
                .attr('id','div_'+d.unid);
        }, container);
    });

---

@伊舍伍德：我真的可以在小学时利用你的帮助！查看您想要绑定到此层次结构的一些数据会有所帮助。目前这一切都有点理论性。这应该很容易实现：D3的圆填充和四叉树都使用递归概念。

<div>
    <h1>
    <div/> 

    <h1>
    <div/>

    ...

</div>

d3.select(someNode)
            .selectAll("div")
                .data(nest)
                .enter()
                .append("div")
                .each(function(d) {
                    d3.select(this).append("h1")
                      .text(htmlFun[0]);
                    d3.select(this).append("div")
                })
            .selectAll("div")
                .data(function(d){return d.values})
                .enter()
                .append("div")
                .each(function(d) {
                    d3.select(this).append("h1")
                      .text(htmlFun[1]);
                    d3.select(this).append("div")
                })
            .selectAll("div")
                .data(function(d){return d.values})
                .enter()
                .append("div")
                .each(function(d) {
                    d3.select(this).append("h1")
                      .text(htmlFun[2]);
                    d3.select(this).append("div")
                }) 
                         ... // repeat for each key
            .selectAll("div")
                .data(function(d){return d.values})
                .enter()
                .append("div")
                // at bottom of key recursion append leaf content

function nestNodeFilter(rootDiv, d){
        var node        = d,
            container   = d3.select(rootDiv);
        if(h==0 && d.values == undefined){ // nest root
        } else if(d.values != undefined && Array.isArray(d.values)) {
            node        = d.values;
            container   = d3.select('#div_'+d.unid);
        } else if(!Array.isArray(d.values)){
            // generate leaf content at bottom of nest
            return
        }
        node.forEach(function(d){
            this.append("h1")
                .attr('id','h1_'+d.unid)
                .text(accordFuns[h](d));
            this.append("div")
                .attr('id','div_'+d.unid);
        }, container);
    });