我如何为此处显示的图表指定宽度 - 例如作为嵌套的填充元素?如图所示,图表占据了整个页面宽度;我想指定一个尺寸,例如 800px x 600px。
是否有可能使用 CSS 解决方案,例如包含<div id="3d-graph"></div>
在另一个 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>