Создайте сетевой граф, используя d3. js - PullRequest
Новая
       83

Создайте сетевой граф, используя d3. js

0 голосов
/ 19 июня 2020

Я пытаюсь создать сетевой график, используя d3. js, и у меня есть данные о разных устройствах и их связях, а также о статусе интерфейса (ссылка вверх или вниз).

Итак, график, который У меня есть что-то вроде этого 

const data = {
    nodes: [{id: "A"}, {id: "B"}, {id: "C"}],
    links: [{
        source: "A",
        sourceInterface: "link1",
        sourceInterfaceUp: true,
        sink: "B",
        sinkInterface: "link2",
        sinkInterfaceUp: false
    }, {
        source: "B",
        sourceInterface: "link3",
        sourceInterfaceUp: true,
        sink: "C",
        sinkInterface: "link4",
        sinkInterfaceUp: true
    }],
}

Не могли бы вы предложить код ReactJS для генерации сетевого графа с узлами (A, B и C) и вершинами (ссылки 1, 2, 3 и 4) с именами для этой структуры данных графика с использованием d3. js

Я ищу что-то вроде этого примера

Но в этом примере я мог бы не придумал, как назначить 2 интерфейса одной и той же вершине, соединяющей устройства. (А) ------------------------- (В) ------------------- ------ (C)

Также, как включить статус интерфейса (true или false) в график.

Любой пример кода будет полезен .

1 Ответ

0 голосов
/ 19 июня 2020

Вы можете использовать amcharts - дерево, ориентированное на сетевой график / силу, которое также является React-совместимым и очень интуитивно понятным.

https://www.amcharts.com/demos/force-directed-network/ https://www.amcharts.com/demos/collapsible-force-directed-tree/

...