使用d3的嵌套jQuery手风琴

Question

I'm running into a frustrating problem while trying to nest jQuery accordions using d3. The problem seems to stem from the seeming inability (or at least difficulty) of trying to create html structures like the following, recursively, and using d3's nest and data binding mechanisms:

<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>

The d3 approaches i've unsuccessfully tried thus far are based on the following, non accordion friendly, nesting/binding code:

var nest = d3.nest()
             .key(//someFun)
             .key(//someFun)
             ...  // undetermined number of keys
             .entries(someData);

d3.select(someNode)
            .selectAll("div")
                .data(nest)
                .enter()
                .append("div")
                .html(htmlFun[0])
            .selectAll("div")
                .data(function(d){return d.values})
                .enter()
                .append("div")
                .html(htmlFun[1])
            .selectAll("div")
                .data(function(d){return d.values})
                .enter()
                .append("div")
                .html(htmlFun[2])
                         ... // repeat for each key

where 'hmtlFun' is a preComputed array of functions to generate content for a given nest key level. This code works fine for generating html structures like

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

but jQuery Accordion's require basic html phrases with mixed/interleaved elements under each div, eg

<div>
    <h1>
    <div/> 

    <h1>
    <div/>

    ...

</div>

I know the following won't work, but I'd love to be able to do something like:

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

Any help/suggestions (related to a solution) are greatly appreciated in advance :^)

Answer 1

For anyone interested, here's a working solution to the problem based on a simple depth-first traversal, nestDFT (not included), which calls nestNodeFilter on each nest node encountered during the traversal. One thing to note, d.unid refers to 'unique node id's which were generated for each nest node prior to running nestDFT.

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);
    });