运行 vasturiano 3D 力图需要什么环境？

Question

我只知道 javascript 从网络浏览器的角度来看，但我需要以这个网络组件的方式在线显示数据： https://github.com/vasturiano/3d-force-graph

问题是那里的设置说明对新手一点都不友好。它假设一些基础知识到高级知识。所以我做了一些研究，尽管每个谈论该组件的人都说它很容易实现，但 none 的人说如何实现。

我推测一定有一些 javascript 服务器参与（node.js？）。 Three.js 和 d3-force-3d 必须导入（不知何故，某处）。但仅此而已。我什至不确定这是否足够。但我只是不知道如何设置整个东西，以便我可以运行这些脚本之一。

所以，任何人都可以在新手级别给我一些提示，以便我可以逐步使用这些脚本吗？因为在这一点上，我愿意搜索，但我不知道究竟要搜索什么。我缺乏全局观，而 link 中的信息非常具体且不够全面。

我在网上搜索了两天，但没有找到太多关于 3d-force-graph 的信息，关于如何设置它的信息也为零。

我所需要的只是信息方面的一座桥梁，这样非专家就可以设置和运行（使用自定义数据）这些脚本。我的意思是什么环境，什么libraries/dependencies，导入什么，怎么导入等等。不一定详细，因为任何帮助都是一个很好的起点。

谢谢。

Answer 1

我能够通过简单地创建一个 .html 文件并将其放入 Web 服务器来运行基本示例。因此，如果您获取 Basic 示例 (https://github.com/vasturiano/3d-force-graph/blob/master/example/basic/index.html) 并将该文件内容放入您的开发 Web 服务器中。

所以 index.html 文件看起来像：

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/3d-force-graph"></script>
</head>

<body>
  <div id="3d-graph"></div>

  <script>
    // Random tree
    const N = 300;
    const gData = {
      nodes: [...Array(N).keys()].map(i => ({ id: i })),
      links: [...Array(N).keys()]
        .filter(id => id)
        .map(id => ({
          source: id,
          target: Math.round(Math.random() * (id-1))
        }))
    };

    const Graph = ForceGraph3D()
      (document.getElementById('3d-graph'))
        .graphData(gData);
  </script>
</body>

只需在浏览器中打开即可。

关于依赖，貌似只需要导入一个，有不同的导入选项（这里提到https://github.com/vasturiano/3d-force-graph#quick-start），导入的方式取决于你的开发环境。

运行 vasturiano 3D 力图需要什么环境？

What environment do I need to run a vasturiano 3D-Force Graph?

javascript

environment

graph

three.js

d3.js