How to import a package and call the function in angular?

Question

I'm trying to import a d3-lasso package to use on angular (v10) and d3 (v5).

I installed d3-lasso using npm.

import { Component, OnInit, AfterViewInit, AfterContentInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as d3 from 'd3';
import * as d3lasso from 'd3-lasso'; <-- this is how I'm importing the library

When using this in regular javascript, we'd use this as d3.lasso() and it'd work fine. But since I'm using angular, I get the following error.

Property 'lasso' does not exist on type 'typeof' import("..../@types/d3/index")'

so, I tried a couple of things:

d3.d3lasso.lasso()
d3lasso.lasso()

but they all keep error out with similar errors as above. How do I call this lasso function so that I can use it in the component?

What are you trying to install is a javascript package not compatible with typescript , there is someone having some issue like yours try to check it :https://github.com/skokenes/D3-Lasso-Plugin/issues/14 — Rebai Ahmed, Aug 26 '20 at 15:07
@RebaiAhmed, the link you provided doesn't say much. The person said they had similar issue and then said issue resolved, but not sure how he did it. I was wondering if there's something I can do to make it work? — Kuni, Aug 26 '20 at 15:15
Have you tried `declare var d3lasso;` instead of import and then use it `d3lasso.lasso()` — daddygames, Aug 26 '20 at 15:15
@daddygames, could you please elaborate? I'm not sure if I follow — Kuni, Aug 26 '20 at 15:16
this link might help? https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular — daddygames, Aug 26 '20 at 15:17
this link might help I think:https://html.developreference.com/article/14090543/How+to+implement+D3+lasso+plugin+with+Angular+2+and+Typescript — Rebai Ahmed, Aug 26 '20 at 15:38

score 1 · Accepted Answer · answered Aug 26 '20 at 19:19

I have tried your scenario. I have followed the below mentioned steps to execute d3 js.

Install the delasso module by using command npm install d3-lasso.
Import d3lasso in one of the component by import * as d3lasso from 'd3-lasso';
Added the d3 script file to the index.html. <script src="https://d3js.org/d3.v4.min.js"></script>
Then declared it in the component. declare var d3;
Then invoking the d3 functions with the help of the example.


import * as d3lasso from 'd3-lasso';
declare var d3;

export class UsercomponentComponent implements OnInit {
 ngOnInit() {
   this.getLasso();
 }

 getLasso() {
   var data = new Array(100).fill(null).map(m=>[Math.random(),Math.random()]);
       var w = 960;
       var h = 500;
       var r = 3.5;
   var svg = d3.select("body").append("svg")
           .attr("width",w)
           .attr("height",h);
   var circles = svg.selectAll("circle")
           .data(data)
           .enter()
           .append("circle")
           .attr("cx",d=>d[0]*w)
           .attr("cy",d=>d[1]*h)
           .attr("r",r);
   var lasso = d3.lasso()
           .closePathSelect(true)
           .closePathDistance(100)
           .items(circles)
           .targetArea(svg)
           .on("start",this.lasso_start())
           .on("draw",this.lasso_draw())
           .on("end",this.lasso_end());
       
       svg.call(lasso);
 }
lasso_start() {
   d3lasso.items()
       .attr("r",3.5) // reset size
       .classed("not_possible",true)
       .classed("selected",false);
}

lasso_draw() {
       
 // Style the possible dots
 d3lasso.possibleItems()
     .classed("not_possible",false)
     .classed("possible",true);

 // Style the not possible dot
 d3lasso.notPossibleItems()
     .classed("not_possible",true)
     .classed("possible",false);
}

lasso_end() {
 // Reset the color of all dots
 d3lasso.items()
     .classed("not_possible",false)
     .classed("possible",false);

 // Style the selected dots
 d3lasso.selectedItems()
     .classed("selected",true)
     .attr("r",7);

 // Reset the style of the not selected dots
 d3lasso.notSelectedItems()
     .attr("r",3.5);

}
}

thank you for this. It's very helpful. However, I'm getting `d3.lasso is not a function` error. I do have `d3-lasso` installed and `d3` is referenced as you suggested. Any thoughts? — Kuni, Aug 26 '20 at 22:31
This error is fixed and it's loaded properly. Thank you @Muthupriya for helping me resolve this issue. I'll accept this as an answer. However, I'm running into another issue with lasso. If you don't mind could you please look at this [here](https://stackoverflow.com/questions/63641819/how-to-make-d3-lasso-working-on-d3-forcedirected-network)? — Kuni, Aug 31 '20 at 12:33

How to import a package and call the function in angular?

1 Answers1