d3js> Ленивая загрузка данных по требованию

Question

d3js> Ленивая загрузка данных по требованию

1

Я использую Rob's d3js " d3js дерево" для визуализации отношений данных (насколько это хорошо!).

Это хорошо работает со статическими данными - однако я бы хотел динамически извлекать и загружать "дочерние" отношения, когда листовой узел расширяется (/кликается).

например

Когда root расширяется, а ProjectA расширяется, и пользователь нажимает дочерний ProjectB, тогда дети ProjectB (динамически) загружаются и отображаются (и так далее).

Причины такого поведения:

сокращение предварительной загрузки больших/сложных структур данных
формирование круговых структур данных

В настоящее время я читаю d3js API Docs, но я все равно не вижу:

с указанием динамического источника данных (например, функция, которая дает родительский элемент, возвращает детей)
добавление дочерних узлов на основе события

Любые указатели приветствуются!

Пример/WIP: https://jsbin.com/davetij/edit?js,output

Nick Grealy 24 окт. 2018, в 02:32

Источник

Теги:

javascript

d3.js

lazy-loading

1 ответ

Ещё вопросы

Nick Grealy · Answer 1 · 2018-10-24T04-48-00.000Z

Решив это решение, было легче, чем я понял.

Я создал функцию 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