D3js > Lazy Load Data Ondemand

I'm currently using Rob's d3js 'collapsible tree' to render data relationships (so far so good!). This works well with static data - however I'd like to dynamically retrieve and lo

Solution 1:

Solved it, the solution was easier than I realised.

I created a function lazyLoadChildren(..) to dynamically populate a node's children (based on the node name)...

i.e.

const childrenLookup = {
    ProjectA: [
        {"name":"FOO"},
        {"name":"BAR"},
        {"name":"CAT"},
        {"name":"ProjectB"}
    ],
    ProjectB: [
        {"name":"FOO"},
        {"name":"BAR"},
        {"name":"CAT"},
        {"name":"ProjectA"}
    ]
}

const lazyLoadChildren = d => {
    const dynamicChildren = childrenLookup[d.name]
    if (isNotPresent(d.children) && isNotPresent(d._children) && isPresent(dynamicChildren)) {
        d.children = deepCopy(dynamicChildren)
    }
}

... then I invoked it for each child of a node, whenever the expand(..) function was called...

i.e.

functionexpand(d, recurseFlag) {
    if (d._children) {
        d.children = d._children;
        // lazy load all children (collapsed)
        d.children.forEach(x => {
            lazyLoadChildren(x)
            collapse(x)
        })
        if (recurseFlag === true) {
            d._children.forEach(x =>expand(x, recurseFlag));
        }
        d._children = null;
    }
}

Here is the full example: https://jsbin.com/davetij/edit?output