如何导入包并以角度调用函数？

Question

我正在尝试导入一个d3-lasso 包以在angular (v10) 和d3 (v5) 上使用。

我使用npm 安装了d3-lasso。

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

当在常规javascript 中使用它时，我们会将它用作d3.lasso()，它会正常工作。但是由于我使用的是角度，所以我收到以下错误。

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

所以，我尝试了几件事：

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

但它们都排除了与上述类似的错误。如何调用这个lasso 函数以便在组件中使用它？

Answer 1

我已经尝试过您的方案。我已经按照下面提到的步骤来执行 d3 js。

1. 使用命令 npm install d3-lasso 安装 delasso 模块。
2. 通过 import * as d3lasso from 'd3-lasso' 将 d3lasso 导入其中一个组件；
3. 将 d3 脚本文件添加到 index.html。 <script src="https://d3js.org/d3.v4.min.js"></script>
4. 然后在组件中声明它。 声明 var d3;
5. 然后在示例的帮助下调用 d3 函数。

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);

}
}