Создание интерактивной карты устройства с использованием D3

Таким образом, у нас есть веб-приложение для управления устройствами / программным обеспечением на многочисленных пользовательских устройствах. Недавно нам предложили идею визуального представления этих сетей клиентов. Вот идея того, как будет выглядеть иерархия:

customer
    location1
        router1
            10 devices
        router2
            15 devices
    location2
        router3
            200 devices
        router4
            200 devices
        router5
            50 devices

Предлагаемая идея состоит в том, чтобы иметь визуализацию этой иерархии, где клиент мог бы нажать на location1, чтобы увеличить его, и увидеть свои два устройства маршрутизации и т. Д. Затем они могли бы включить "слои", которые бы отображали такие вещи, как кодек соединения между устройствами с помощью стрелок. Это будет использоваться в первую очередь для просмотра структуры их сети, настройки частей сети и отладки маршрутизации и т. Д. Внутри сети.

Моей первой идеей было создать древовидную карту, аналогичную отображаемой здесь: http://bost.ocks.org/mike/treemap. Он показывает распределение сети и позволяет масштабировать до определенной части.

У меня вопрос к вам, ребята, по каким путям вы предлагаете мне пойти по этому пути. Является ли карта дерева подходящей основой для использования, или я должен начать с чего-то более простого? Есть ли другие примеры подобных макетов, на которые вы могли бы указать мне?

Источник

1 ответ

Решение

Я мог бы пойти с дендрограммой, созданной кластерным макетом D3. К любой визуализации D3 может быть применено поведение масштабирования следующим образом, так что это не очень важно.

Источник
Другие вопросы по тегам