D3.js Войти в выходную реализацию шаблона обновления

Фон:

Я работаю над тестовым проектом по исследованию ориентированного графа в THREE.js, у меня есть структура данных, которая не является DOM, но имеет много общих свойств. А именно, структура является иерархической, и я могу выполнить выбор (подграф). Я построил макет двигателя. Теперь я хочу сделать это динамичным. Под этим я подразумеваю, что я хотел бы иметь возможность добавлять / удалять / обновлять узлы, которые в этом случае представлены объектами сцены.

Мне нравится, как это обрабатывается в D3.js, однако библиотека, похоже, сильно зависит от данных, существующих в DOM (?)

Я изучил исходный код и немного повредил голову.

Вопрос:

Кто-нибудь знает, как закодирован шаблон входа, выхода, обновления Майка Бостока, как я хотел бы сделать игрушечную реализацию, которая будет обрабатывать мой (не DOM) сценарий.

Спасибо заранее.

Источник

2 ответа

Решение

Майк Босток, автор D3, опубликовал статью о дизайне D3. Его соавторами были Вадим Огиевецкий и Джеффри Хир, опубликованные в IEEE Trans. Визуализация и Комп. Графика (Proc. InfoVis), 2011. Ссылка на бесплатный загружаемый PDF-файл можно найти здесь.

После того, как я правильно понял шаблон обновления и его реализация была не сложной.

Для интересующихся: ключ к динамическим переходам - ​​это возможность определить, какие данные поступают, уходят и остаются (вход, выход, обновление в D3). Вы можете расположить прибывающие и оставшиеся данные и выполнить преобразования на любом из узлов или их визуальных представлений. Например, удаление элементов из вашего представления.

В моем случае мне нужно было вычислить графические комплименты и пересечения между предками моего нового корневого узла и предками моего предыдущего корневого узла.

Источник

D3 прост, если вы понимаете некоторые основы. Вот некоторые основы, которые будут вам полезны.

  • Выборы являются основной концепцией в D3
  • Выберите тело страницы
  • Добавить элемент контейнера
  • Для каждого элемента набора данных добавьте визуальный элемент

Что оно делает?

  • Загрузка, переплет, преобразование, переход
  • d3 - ссылается на объект D3
  • select() - он вернет ссылку на первый элемент в DOM, который соответствует
  • selectAll() - более одного элемента
  • append() - создает новый DOM и добавляет его в конец выделения
Источник
Другие вопросы по тегам