Question

我想使用带有角5的d3..js使用动态数据生成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>

我的疑问是，我可以通过两种方式在此处绑定数据

Answer 1

我已经遇到这种情况，后端响应后，画布区域没有重新绘制。我使用以下示例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;

方法内部：

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

Wordcloud数据的两种方式绑定

1 个答案: