指定三个.js图形大小

问题描述 投票：0回答：1

如何为此处显示的图表指定宽度 - 例如作为嵌套的填充元素？如图所示，图表占据了整个页面的宽度；我想指定一个尺寸，例如800 像素 x 600 像素。

CSS 解决方案是否可行，例如另一个 DIV 元素中包含 

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

代码来源：https://github.com/vasturiano/3d-force-graph（“图像作为节点”）

<head>
  <script src="//unpkg.com/3d-force-graph"></script>
</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>

three.js
1个回答
0
投票

通过 

Graph.width(x)
和 
Graph.height(x)
方法，您可以更改 
Canvas
的大小，而不是图形本身。您所期望的，即对图表本身的操作，无法通过
CSS
来完成。 
CSS
定义了x轴和y轴上的宽度，此外，它不操作
Canvas
中的内容，而是操作
Canvas
本身作为
DOM
元素。要缩放图形本身，您还需要 z 轴，因为我们在三个维度上移动。通过比例方法操纵图形本身是不可能的。主要来说，最好/最简单的解决方案可能是缩放场景。尝试操纵图本身涉及操纵节点和链接。

尝试调用方法

scene
:

const scene = Graph.scene();
scene.scale.set(1.5, 1.5, 1.5);

您可以一起调用 

width
、
height
和 
scene
方法，从而使图形适应 
Canvas
以及 
Canvas
本身。当您期望场景中除了图形之外还有其他对象时，这尤其有用。

警告：正在导入 Three.js 的多个实例。错误

当您编译项目中加载的 

Three.js
的多个版本或实例时，会出现警告。 如果您使用 
3d-force-graph
或 
three-spritetext
，它也可能会引入自己的 3 版本。 确保您仅加载一个版本的 
Three.js
并且所有其他库都使用同一实例。

顺便说一句

另一方面，您可以创建自己的图表。

https://codepen.io/Lucas_Mas/pen/bGXyQVO

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.