Варианты дизайна для выбора пользователем наборов узлов в силовом ориентированном графе d3.js
Я работаю над визуализацией интерактивного графа с использованием силового макета d3.js. Я хочу, чтобы пользователи могли выбирать наборы узлов, нажимая на них один за другим. У меня есть набор вычислений, которые я позволю пользователям выполнять на выбранном наборе. Например, пользователь может выбрать два разных узла и затем попросить систему вычислить кратчайший путь между ними (если он есть).
Таким образом, вопрос состоит в том, как представить выбранный набор узлов, чтобы я мог (а) позволить пользователю добавлять и удалять узлы из набора, (б) визуализировать выбранные узлы (например, выделяя их) и (в)) выполнять вычисления на узлах.
Я вижу несколько разных опций, которые работают в разных точках конвейера d3.
Одним из них является наличие флага на самих данных, который указывает, выбран ли узел или нет. Выделить узлы легко: различные функции стиля и атрибутов смотрят на флаг d.selected. Я не уверен, что лучшая стратегия для обработки выбора и отмены выбора узлов, все же. Должен ли я установить значение данных, а затем перезапустить весь беспорядок d3.selectAll.data.enter..?
Другой вариант - сохранить отдельный массив выбранных узлов в качестве глобальной переменной. Это облегчает поиск множества узлов. Для реализации выделения стиля / атрибута функции нужно посмотреть, находится ли данный узел в наборе. Опять же, я не уверен, как изменить визуализацию, когда узел добавляется или удаляется из набора.
Последний вариант - изменить стиль / атрибуты на каждом узле в тот момент, когда на него нажимают. Но тогда как мне определить набор выбранных узлов?
Любой совет будет принята с благодарностью!