JavaScript - Интерактивные схемы в приложении Backbone.js

Question

фона: Я в настоящее время разрабатывает на стороне клиента для веб-приложения, используя JavaScript, с jQuery и Backbone.js (они требуются инициатору).
Это приложение для визуализации и редактирования данных в графическом режиме (в основном интерактивные диаграммы, представляющие данные).

Терминология: упомянутые данные в соответствии с форматом нескольких документов, каждый из которых содержит список элементов.
Для целей этого вопроса, пусть элементы будут составлены с идентификатором , описание в текстового и ссылки на элементы в других документах. Ссылки должны быть симметричными (i1 -> i2 существует если и только если i2 -> i1 также есть).

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

Эти документы могут быть несколько длинными, скажем, несколькими десятками предметов (может быть, несколько сотен, в реалистичном сценарии). Конечно, страница будет прокручиваться, чтобы пользователь мог видеть все.

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

То, что я успел сделать:

• Считывает данные и сопоставить его с моделями Магистральные и коллекций;
• Показать оба документа бок о бок (виды мачты), с соединениями с элементами;
• Разрешить интерактивность в этих соединениях (перетаскивание для создания линий, щелчок для удаления), отражающие изменения на моделях Backbone;
• Скрыть отдельные предметы;
• Масштабные эффекты.

Я достиг этого, используя SVG, после прохождения через jsPlumb.

Проблема в руках: Приложение по-прежнему нуждается в настройках (акцент на эффекты масштабирования). Несмотря на это, я нашел jsPlumb удобным для работы.Однако при использовании слайдера производительность рендеринга немного недостаточна (возможно, шаги слайдера слишком малы, что приводит к слишком большому количеству событий).

Сторонник предположил, что вместо этого я попробую диаграммы Санки представить эти данные. Они также предложили мне попробовать Sankey by tamc, основанный на Raphaël.js.
Конечно, визуальный фактор также способствует.

Мой вопрос (ы): Имеет ли эта библиотека хорошую совместимость с базовой сетью? Возможно, если я использую полученные элементы SVG как элементы Backbone views.
Кроме того, имеет ли какое-либо из двух преимуществ преимущество рендеринга в сравнении с другим?

В заключение, есть ли другие библиотеки, более подходящие для этого сценария, стоит время перезаписи приложения, которое я мог бы предложить сторонникам?

Answer 1

Проект продолжается, и я закончил использование Sankey by tamc, с некоторыми дополнительными работами, чтобы лучше адаптировать его к этому конкретному случаю.