Reputation: 11
Getting below exception while trying to implement d3 drag behaviour
Argument of type 'DragBehavior<Element, unknown, unknown>' is not assignable to parameter of type '(selection: Selection<SVGCircleElement, { id: string; x: number; y: number; }, SVGGElement, unknown>) => void'. Types of parameters 'selection' and 'selection' are incompatible. Type 'Selection<SVGCircleElement, { id: string; x: number; y: number; }, SVGGElement, unknown>' is not assignable to type 'Selection<Element, unknown, any, any>'. The types of 'select(...).join' are incompatible between these types.
//Code snippet
const svg=d3.select(this.elementRef.nativeElement).select('svg');
const width=+svg.attr('width')+100;
const height=+svg.attr('height')+100;
const simulation=d3.forceSimulation()
.force('link',
d3.forceLink().id((d:any)=>d.id))
.force('charge',
d3.forceManyBody())
.force('center',
d3.forceCenter(width/2,height/2));
const link=svg.append('g')
.selectAll('line')
.data(this.graphData.links)
.enter()
.append('line')
.attr('stroke','#999')
.attr('stroke-opacity',0.6)
.attr('stroke-width',1);
const node=svg.append('g')
.selectAll('circle')
.data(this.graphData.nodes)
.enter().append('circle')
.attr('r',5)
.attr('fill','#1f77b4')
.call(d3.drag()
.on('start',dragstarted)
.on('drag',dragged)
.on('end',dragended));
simulation.nodes(this.graphData.nodes).on('tick',ticked);
simulation.force<d3.ForceLink<any,any>>('link')
?.links(this.graphData.links);
function ticked(){
link.attr('x1',(d:any)=>d.source.x)
.attr('y1',(d:any)=>d.source.y)
.attr('x2',(d:any)=>d.target.x)
.attr('y2',(d:any)=>d.target.y);
node.attr('cx',(d:any)=>d.x)
.attr('cy',(d:any)=>d.y)
}
function dragstarted(event:d3.D3DragEvent<SVGCircleElement,any,any>,d:any){
if(!event.active)
simulation.alphaTarget(0.3).restart();
d.fx=d.x;
d.fy=d.y;
}
function dragged(event:d3.D3DragEvent<SVGCircleElement,any,any>,d:any){
d.fx=d.x;
d.fy=d.y;
}
function dragended(event:d3.D3DragEvent<SVGCircleElement,any,any>,d:any){
if(!event.active)
simulation.alphaTarget(0);
d.fx=null;
d.fy=null;
}
--version angular:15.0.0 "@types/d3": "^7.4.3", "d3": "^7.4.4",
Upvotes: 0
Views: 55