user3505997
user3505997

Reputation: 11

Facing issue while implementing Drag behaviour for D3 nodes

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

Answers (0)

Related Questions