如何在我托管在 vue js 中的 Web 应用程序中呈现或嵌入 ArangoDB 的图形？

Question

我在 AWS 服务器上运行 ArangoDB，我能够在 ArangoDB Web 界面中生成图表。但我的一个用例是，我需要在使用 vue js 托管的前端 Web 应用程序中显示/呈现/嵌入 ArangoDB 生成的图形。我怎样才能实现这个用例？我需要找到第三方图形资源管理器工具才能这样做吗？ 这是我从 ArangoDB AQL 获得的示例响应：

[
  {
    "vertices": [
      {
        "_key": "684201",
        "_id": "dev_user/684201",
        "_rev": "_e6sXZR----",
        "account_flags": [],
        "email": "[email protected]",
        "full_name": "Loh Wei Min"
      },
      {
        "_key": "103.3.21.54",
        "_id": "ip_address/103.3.21.54",
        "_rev": "_e6sWLaq---"
      }
    ],
    "edges": [
      {
        "_key": "276292",
        "_id": "user_relation_ips/276292",
        "_from": "dev_user/684201",
        "_to": "ip_address/103.3.21.54",
        "_rev": "_e6sXZou---"
      }
    ],
    "weights": [
      0,
      1
    ]
  },
  {
    "vertices": [
      {
        "_key": "684201",
        "_id": "dev_user/684201",
        "_rev": "_e6sXZR----",
        "account_flags": [],
        "email": "[email protected]",
        "full_name": "Loh Wei Min"
      },
      {
        "_key": "202.184.222.30",
        "_id": "ip_address/202.184.222.30",
        "_rev": "_e6sV2ES---"
      }
    ],
    "edges": [
      {
        "_key": "276289",
        "_id": "user_relation_ips/276289",
        "_from": "dev_user/684201",
        "_to": "ip_address/202.184.222.30",
        "_rev": "_e6sXZmO---"
      }
    ],
    "weights": [
      0,
      1
    ]
  },
  {
    "vertices": [
      {
        "_key": "684201",
        "_id": "dev_user/684201",
        "_rev": "_e6sXZR----",
        "account_flags": [],
        "email": "[email protected]",
        "full_name": "Loh Wei Min"
      },
      {
        "_key": "211.24.73.181",
        "_id": "ip_address/211.24.73.181",
        "_rev": "_e6sV0vS---"
      }
    ],
    "edges": [
      {
        "_key": "276286",
        "_id": "user_relation_ips/276286",
        "_from": "dev_user/684201",
        "_to": "ip_address/211.24.73.181",
        "_rev": "_e6sXZl----"
      }
    ],
    "weights": [
      0,
      1
    ]
  },
  {
    "vertices": [
      {
        "_key": "684201",
        "_id": "dev_user/684201",
        "_rev": "_e6sXZR----",
        "account_flags": [],
        "email": "[email protected]",
        "full_name": "Loh Wei Min"
      },
      {
        "_key": "211.24.73.170",
        "_id": "ip_address/211.24.73.170",
        "_rev": "_e6sUDn2---"
      }
    ],
    "edges": [
      {
        "_key": "276283",
        "_id": "user_relation_ips/276283",
        "_from": "dev_user/684201",
        "_to": "ip_address/211.24.73.170",
        "_rev": "_e6sXZie---"
      }
    ],
    "weights": [
      0,
      1
    ]
  }
]

Answer 1

最后，为了数据存储目的，我们从 ArangoDB 切换到 AWS Neptune，并使用 vis.js 在前端渲染图形