angular - 我怎样才能在 typescript 中导入 d3-selection-multi

Question

我已经安装了来自 d3.js 和 d3-selection-multi 的包。在我的 app/app.component.ts 文件中，我尝试导入它们。

import * as d3 from 'd3';
import * as d3SelectionMulti from 'd3-selection-multi';

我的想法是使用嵌入 的 .attrs 属性，但我收到此错误:

.attrs is not a function

这是我的代码:

import * as d3 from 'd3';
import * as d3SelectionMulti from 'd3-selection-multi';
.
.
  var duration = 5000;
  var posicionFinal = 250;
  var posicionActual = 0;
  var segundosDuracion = 0;
  var oProperties = { x: posicionFinal, fill: "red" };
  rectangle
    .datum(oProperties)
    .transition()
    .duration(duration)
    .ease(d3.easeLinear)
    .attrs(oProperties)

我该如何解决？

这是我的实时代码:

https://stackblitz.com/edit/d3-angular-wusbox?file=src%2Fapp%2Fapp.component.ts

Answer 1

您将无法以这种方式导入 d3-selection-multi 包，因为不支持以这种方式导入。

您可以使用多种替代方案:

1. 将 attrs 的使用替换为多个 attr 调用
2. 更新您的配置文件以在构建期间包含所需的脚本。例如，在您配置的 json 文件中，更新 scripts 部分以包含以下脚本:

"scripts": [
  "./node_modules/d3-color/dist/d3-color.min.js",
  "./node_modules/d3-dispatch/dist/d3-dispatch.min.js",
  "./node_modules/d3-ease/dist/d3-ease.min.js",
  "./node_modules/d3-interpolate/dist/d3-interpolate.min.js",
  "./node_modules/d3-selection/dist/d3-selection.min.js",
  "./node_modules/d3-selection-multi/build/d3-selection-multi.min.js",
  "./node_modules/d3-timer/dist/d3-timer.min.js",
  "./node_modules/d3-transition/dist/d3-transition.min.js"
]

可以在以下位置找到工作示例:https://github.com/dipen08it419/D3Test

1. 在 index.html 文件中包含所需的脚本，并在您的组件中直接使用 d3 而无需导入 d3。

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     name = 'Angular 6';
     ngOnInit() {
       var svg = d3
         .select("#video_container")
         .append("svg")
         .attr("width", 1000)
         .attr("height", 1000);
   
       var rectangle = svg
         .append("rect")
         .attr("width", 100)
         .attr("height", 70)
         .attr("x", 0)
         .attr("y", 50)
         .attr("fill", "blue")
         .attr("opacity", "1");
   
       var duration = 5000;
       var posicionFinal = 250;
       var posicionActual = 0;
       var segundosDuracion = 0;
       var oProperties = { x: posicionFinal, fill: "red" };
   
   rectangle
       .datum(oProperties)
       .transition()
       .duration(duration)
       .ease(d3.easeLinear)
       .attrs(oProperties)
     }  
   }

   <script type="text/javascript" src="./node_modules/d3-color/dist/d3-color.min.js"></script>
   <script type="text/javascript" src="./node_modules/d3-dispatch/dist/d3-dispatch.min.js"></script>
   <script type="text/javascript" src="./node_modules/d3-ease/dist/d3-ease.min.js"></script>
   <script type="text/javascript" src="./node_modules/d3-interpolate/dist/d3-interpolate.min.js"></script>
   <script type="text/javascript" src="./node_modules/d3-selection/dist/d3-selection.min.js"></script>
   <script type="text/javascript" src="./node_modules/d3-timer/dist/d3-timer.min.js"></script>
   <script type="text/javascript" src="./node_modules/d3-transition/dist/d3-transition.min.js"></script>
   <script type="text/javascript" src="./node_modules/d3-selection-multi/build/d3-selection-multi.min.js"></script>
   <my-app>loading</my-app>

在本 stackblitz 中使用.但请谨慎使用它，因为您需要允许从您的设置中访问 node_modules 文件，这在 stackblitz 上运行良好，但可能不适用于您的本地环境。

不幸的是，由于库中对 webpack 的支持有限，我们需要采用其中一种方法。