Проблемы с добавлением и удалением узлов в форс-макете с использованием d3.js

Question

Я пытаюсь визуализировать доступность сервера (и позже, когда это сработает), получая данные из Zabbix API. Вы можете увидеть пример того, как возвращаемые данные выглядят [здесь][1] в Документации по Zabbix API.

Получение данных не проблема, но у меня возникли некоторые проблемы с присоединением данных d3.js, я думаю, или, скорее, как я должен это сделать.

После извлечения данных я получаю массив серверов, отсортированных по алфавиту, и хочу, чтобы новые серверы появлялись, а удаленные просто исчезали, а любые изменения в доступности (или иным образом - в будущем) отражались в цвете или в любом другом месте. может подумать.

Дело в том, что граф не должен повторно инициализироваться, он должен просто обновляться путем добавления или удаления узлов.

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

И третье, в результате чего все узлы застряли в верхнем левом углу.

Последний, который является текущим состоянием моего кода.

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

Я был бы признателен, если бы у меня были какие-то указатели для меня, это было бы здорово. Я играл с этим на работе в течение прошлой недели, не получая намного дальше:)

Спасибо!

Поскольку у меня есть доступ к Zabbix только на работе, я действительно могу тестировать вещи только в период времени CET 16-21, то есть около 4 часов сегодня. Если у кого-нибудь будут какие-либо предложения в течение ночи, я опробую это завтра:D

Мой код на GitHub будет находиться по ссылке под моим сообщением, поскольку отсутствие репутации на этом сайте привело меня к мрачной дыре, где я могу добавить только две ссылки на свое сообщение.

Почему это не глобально? У меня есть более 10 представителей на других сайтах SE..

Редактировать:

По-прежнему возникают проблемы, каждый раз, когда данные обновляются, круги "вводятся" так же, как и при первой загрузке этого файла: http://mbostock.github.com/d3/talk/20111018/collision.html Не знаю, что теперь делать: /

Answer 1

То, что вы упоминаете там, это поведение по умолчанию D3. При добавлении узлов они будут вставлены в верхний левый угол. Вы можете изменить это поведение, написав свой собственный метод размещения и непосредственно установив X и Y каждого узла, когда добавите его в свой форсированный граф.

Хитрость заключается в том, чтобы применить этот алгоритм:

1) вычислите пределы области просмотра (скажем, границы вашей области рисования - 20) и используйте приемы из примера с направленной силой ( http://bl.ocks.org/1129492)

2) затем для каждого тика визуализации сделайте следующее: вычислите силы, чтобы держать узлы в области просмотра

3) алгоритм удержания узла в области просмотра будет выглядеть примерно так: для каждого узла вычислите X и Y в соответствии с силами, которые могут быть применены в 4 направлениях (вверху слева, внизу слева, вверху справа, внизу справа) - если это ближе к верхнему левому углу, тогда вы установите X и Y соответственно.... в любом случае это не будет за пределами экрана....

Другой трюк - настроить корневой узел в центре (см. Этот пост: как мне установить фокусный узел на графике силы D3.js?). Это поможет стабилизировать ваш график. Другой совет - не смешивать вызовы ajax с вашими перерисовками. В идеале следует использовать некоторые обратные вызовы и перерисовывать вызовы при загрузке данных, в противном случае вы получите код спагетти (обычно принудительные ориентированные графы имеют длину более 1000 строк).

Надеюсь, поможет.