如何指定3D Force Graph尺寸？固定宽高与CSS实现方案问询

完全可以通过CSS实现，两种实用方案任选：

方案1：嵌套外层容器 #

把3D图的容器嵌套到一个外层div中，通过外层容器控制尺寸和内边距，内部容器填充满外层空间。

完整代码示例：

<head>
  <script src="//unpkg.com/3d-force-graph"></script>
  <style>
    .graph-wrapper {
      width: 800px;
      height: 600px;
      padding: 20px;
      box-sizing: border-box; /* 确保内边距包含在设定的宽高内 */
      margin: 0 auto; /* 可选：让容器水平居中 */
      border: 1px solid #e5e5e5; /* 可选：添加边框便于观察范围 */
    }
    #3d-graph {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nam ut fringilla enim. </p>

<div class="graph-wrapper">
  <div id="3d-graph"></div>
</div>

<p>Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam.</p>

<script type="module">
  import SpriteText from "https://esm.sh/three-spritetext";

  const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
    .jsonUrl('https://raw.githubusercontent.com/vasturiano/3d-force-graph/c8019651c7a851ebcd7ef595123b631fe6eca3eb/example/datasets/miserables.json')
    .nodeAutoColorBy('group')
    .nodeThreeObject(node => {
        const sprite = new SpriteText(node.id);
        sprite.material.depthWrite = false;
        sprite.color = node.color;
        sprite.textHeight = 6;
        return sprite;
      });
</script>
</body>

关键说明：

• .graph-wrapper定义了固定的800px宽、600px高，以及20px内边距；
• box-sizing: border-box是核心属性，它让内边距不会额外撑开容器尺寸；
• 内部的#3d-graph设置宽高100%，刚好填满外层容器的可用区域。

方案2：直接设置目标容器样式 #

不需要额外嵌套，直接给3D图的容器元素添加样式，一步到位。

完整代码示例：

<head>
  <script src="//unpkg.com/3d-force-graph"></script>
  <style>
    #3d-graph {
      width: 800px;
      height: 600px;
      padding: 20px;
      box-sizing: border-box;
      margin: 0 auto; /* 可选：水平居中 */
      border: 1px solid #e5e5e5; /* 可选：添加边框 */
    }
  </style>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nam ut fringilla enim. </p>

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

<p>Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam.</p>

<script type="module">
  import SpriteText from "https://esm.sh/three-spritetext";

  const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
    .jsonUrl('https://raw.githubusercontent.com/vasturiano/3d-force-graph/c8019651c7a851ebcd7ef595123b631fe6eca3eb/example/datasets/miserables.json')
    .nodeAutoColorBy('group')
    .nodeThreeObject(node => {
        const sprite = new SpriteText(node.id);
        sprite.material.depthWrite = false;
        sprite.color = node.color;
        sprite.textHeight = 6;
        return sprite;
      });
</script>
</body>

关键说明：

• 直接给#3d-graph设置固定宽高和内边距；
• 同样使用box-sizing: border-box避免内边距导致容器尺寸超出预期。

内容的提问来源于stack exchange，提问作者Victoria Stuart