Question

我目前正在使用Rob's d3js“可折叠树”来呈现数据关系（到目前为止一切顺利！）。

这对于静态数据非常有效-但是，当叶节点展开（/单击）时，我想动态地检索和加载“子”关系。

例如

展开root并展开ProjectA时，用户点击孩子ProjectB，然后ProjectB的孩子被（动态）加载和显示（依此类推）。

需要此行为的原因：

减少大型/复杂数据结构的前期负荷
呈现循环数据结构

我目前正在阅读d3js API Docs，但是无论如何我都看不到：

指定动态数据源（例如，给定父级的函数返回子级）
基于事件添加子节点

任何指针都将不胜感激！

示例/在制品： https://jsbin.com/davetij/edit?js,output

Answer 1

解决了这个问题，比我想象的要容易。

我创建了一个函数lazyLoadChildren(..)以动态填充节点的子节点（基于节点name）...

即

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

...然后，每当调用expand(..)函数时，我都会为节点的每个子节点调用它。

即

function expand(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;
    }
}

以下是完整示例：https://jsbin.com/davetij/edit?output

d3js>延迟加载数据点播

1 个答案: