-
Notifications
You must be signed in to change notification settings - Fork 932
Description
I am trying to use 3d-force-graph in an angular application. Using v1.77.0 of 3d-force-graph
Pretty simple component:
`import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import ForceGraph3D from '3d-force-graph';
import { CSS2DObject } from 'three-css2drender';
@component({
selector: 'key-party-graph',
templateUrl: './graph.component.html'
})
export class GraphComponent implements AfterViewInit {
// ForceGraph = ForceGraph;
@ViewChild('graphComponent') graphComponent: ElementRef;
ngAfterViewInit() {
const graphData = {
nodes: [{ id: 'A' }, { id: 'B' }, { id: 'C' }, { id: 'D' }],
links: [
{ source: 'A', target: 'B' },
{ source: 'B', target: 'C' },
{ source: 'A', target: 'D' },
]
};
const myGraph = new ForceGraph3D(this.graphComponent.nativeElement)
.dagMode('td')
.dagLevelDistance(35)
.graphData(graphData)
.width(500)
.height(500)
.nodeThreeObject(node => {
const nodeEl = document.createElement('div');
nodeEl.textContent = node.id;
nodeEl.style.color = node.color;
nodeEl.className = 'node-label';
return new CSS2DObject(nodeEl);
})
.nodeThreeObjectExtend(true)
.linkDirectionalArrowLength(5)
.linkDirectionalArrowRelPos(1);
}
}
`
The error I am seeing in the console is:
`× Failed to compile.
√ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
main.js | main | 8.77 MB |
runtime.js | runtime | 12.93 kB |
10 unchanged chunks
Build at: 2025-05-20T19:37:10.798Z - Hash: 6277d18fc8d90d68 - Time: 7011ms
Error: node_modules/three-forcegraph/dist/three-forcegraph.d.ts:253:155 - error TS2344: Type 'NodeType' does not satisfy the constraint 'NodeObject'.
Type 'NodeType' is not assignable to type 'object'.
253 declare class ThreeForceGraph<NodeType = NodeObject, LinkType = LinkObject> extends ThreeForceGraphGeneric<ThreeForceGraph<NodeType, LinkType>, NodeType, LinkType> {}
~~~~~~~~
node_modules/three-forcegraph/dist/three-forcegraph.d.ts:253:31
253 declare class ThreeForceGraph<NodeType = NodeObject, LinkType = LinkObject> extends ThreeForceGraphGeneric<ThreeForceGraph<NodeType, LinkType>, NodeType, LinkType> {}
~~~~~~~~~~~~~~~~~~~~~
This type parameter might need an extends object constraint.
node_modules/three-forcegraph/dist/three-forcegraph.d.ts:253:31
253 declare class ThreeForceGraph<NodeType = NodeObject, LinkType = LinkObject> extends ThreeForceGraphGeneric<ThreeForceGraph<NodeType, LinkType>, NodeType, LinkType> {}
~~~~~~~~~~~~~~~~~~~~~
This type parameter might need an extends NodeObject constraint.
× Failed to compile.`