运行vasturiano 3D-Force Graph 需要什么环境？答案

【问题标题】：What environment do I need to run a vasturiano 3D-Force Graph?运行vasturiano 3D-Force Graph 需要什么环境？
【发布时间】：2021-06-04 14:35:36
【问题描述】：

我只从 Web 浏览器的角度了解 javascript，但我需要以该 Web 组件的方式在线显示数据： https://github.com/vasturiano/3d-force-graph

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

我假设一定有一些 javascript 服务器涉及（node.js ？）。必须导入 Three.js 和 d3-force-3d（不知何故，某处）。但就是这样。我什至不确定这是否足够。但我只是不知道如何设置整个东西，以便我可以运行其中一个脚本。

那么，任何人都可以在新手级别上给我一些提示，以便我可以通过使用这些脚本来工作吗？因为在这一点上，我愿意搜索，但我不知道究竟要搜索什么。我缺乏大局，而链接中的信息非常具体且不是很详尽。

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

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

谢谢。

【问题讨论】：

标签： javascript d3.js graph three.js environment

【解决方案1】：

我能够通过简单地创建一个 .html 文件并将其放入 Web 服务器来运行基本示例。因此，如果您获取基本示例 (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），你导入的方式取决于你的开发环境。

【讨论】：

非常感谢您的回答，这真的很有帮助，我确实可以渲染示例文件。我什至不希望它会如此直截了当。非常感谢你！我将检查如何远程更改样式（背景、可见标题等）。我想如果您可以更改一些配置属性，希望样式和标题也应该可以更改。我来了！
我能够更改我需要的最小值并插入我自己的值，所以我很高兴，非常感谢你。现在我正在努力充分利用它。我真的以为我需要安装某种本地服务器，安装和导入东西，编辑整个东西，然后将其打包为组件。多亏了你，这出乎意料地容易了。保重！
我很高兴它有帮助