使用 webpack “导入”d3 和 d3-cloud

【问题标题】："import"ing d3 and d3-cloud with webpack使用 webpack “导入”d3 和 d3-cloud
【发布时间】：2016-07-21 05:33:22
【问题描述】：

所以，我一直在尝试导入d3 和d3-cloud（用于词云）进入我的 AngularJs(v - 1.4) 应用程序。我这样做是-
从“d3”导入 d3
从“d3-cloud”导入 d3Cloud。

当我尝试像 d3.layout.cloud() 一样使用 d3-cloud 时，我收到以下错误

_d2.default.layout.cloud is not a function

【问题讨论】：

你找到解决这个问题的方法了吗？

标签： javascript angularjs d3.js ecmascript-6 word-cloud

【解决方案1】：

import { Component, Input, AfterViewInit } from '@angular/core';

//  import and assign libs  **
    import d3 from 'd3' 
    import * as cloud from 'd3-cloud'


@Component({
  selector: 'word-cloud',
  templateUrl: './word-cloud.component.html',
  styleUrls: ['./word-cloud.component.scss'],
  providers: []
})

export class WordCloudComponent implements AfterViewInit {
  constructor() { }


  ngAfterViewInit() {

    d3.scale.category20();
    let layout = cloud()
       .size([ width   ,  height   ])
      .words(data)
      .rotate(function () ...)
      .spiral('rectangular')
      .fontSize(function () ...)
      .on("end", function () ...)
      .start();

}

【讨论】：

这个问题是针对 AngularJS 的，它与您的解决方案所关注的 Angular2+ 不同。