wordcloud数据的两种方式绑定答案

【问题标题】：Two way binding of wordcloud datawordcloud数据的两种方式绑定
【发布时间】：2018-10-25 15:15:10
【问题描述】：

我想使用 d3,.js 和 angular 5 使用动态数据生成 wordcloud。我正在使用https://www.npmjs.com/package/angular-d3-word-cloud 这个 npm 包

<div AgWordCloud #word_cloud_chart=ag-word-cloud [wordData]="word_cloud[options]="options">
    </div>

我的疑问是我可以在这里以两种方式绑定数据

【问题讨论】：

您的意思是代码示例中的[wordData]="word_cloud" [options]="options"？
我需要为 word_cloud 数组实现两种方式绑定，以便 workcloud 会随着数组的更新而更新

标签： javascript angular typescript d3.js

【解决方案1】：

我遇到过这种情况，后台响应后canvas区域没有重绘。我使用了下面的例子https://github.com/alhazmy13/Angular4-word-cloud，我做了一些改动，效果很好。

html：

<div AgWordCloud
     #wordcloudchart=ag-word-cloud
     [wordData]="wordData"
     [options]="wordTagOptions">
</div>

ts 声明：

wordTagOptions = {};
wordData: Array<AgWordCloudData> = [];
@ViewChild('wordcloudchart', {static: false})
agWordCloudDirective: AgWordCloudDirective;

ts-inside-of-method：

this.auditoriaMacroService.list(filtroAtividade)
  .then(resultado => {
       this.wordData = resultado.map(programa => {

          const size: number = programa.tempo.slice(0, 3).replace(':', '');
                    const word = {size: (programa.texto.toLowerCase() == "total" ? -10 : size), text: programa.texto, color: `#${Math.floor(Math.random() * 16777215).toString(16)}`};
                    return word;

                });

                this.agWordCloudDirective.wordData = this.wordData
                setTimeout(() => {
                    this.agWordCloudDirective.update();
                });
            });

结果显示word-cloud-my-image

【讨论】：