d3云的类型
回答
我想出了如何做到这一点。不是正确的Typescript方式,而是使用回退JS方式。这里是你如何去做:
import
像往常一样D3库,但给它一个别名:import * as D3 from 'd3';
(注:资本d为D3)declare
D3再次所以你可以用它来WordCloud :declare let d3: any;
- 使用
D3
来处理与父d3库有关的所有内容,并且仅针对单词云生成使用d3
。
d3-cloud的类型似乎不起作用。所以declare
似乎是现在唯一的方法。
全码:
import { Component, Input, ElementRef, DoCheck, KeyValueDiffers } from '@angular/core';
import { WordCloudConfig } from '../../../models/charts/word-cloud-config';
import * as D3 from 'd3';
declare let d3: any;
@Component({
selector : 'word-cloud',
templateUrl: './word-cloud.component.html',
styleUrls : ['./word-cloud.component.scss']
})
export class WordCloudComponent implements DoCheck {
@Input() config: WordCloudConfig;
private _host; // D3 object referencing host DOM object
private _svg; // SVG in which we will print our chart
private _margin: { // Space between the svg borders and the actual chart graphic
top: number,
right: number,
bottom: number,
left: number
};
private _width: number; // Component width
private _height: number; // Component height
private _htmlElement: HTMLElement; // Host HTMLElement
private _minCount: number; // Minimum word count
private _maxCount: number; // Maximum word count
private _fontScale; // D3 scale for font size
private _fillScale; // D3 scale for text color
private _objDiffer;
constructor(private _element: ElementRef, private _keyValueDiffers: KeyValueDiffers) {
this._htmlElement = this._element.nativeElement;
this._host = D3.select(this._element.nativeElement);
this._objDiffer = this._keyValueDiffers.find([]).create(null);
}
ngDoCheck() {
let changes = this._objDiffer.diff(this.config);
if (changes) {
if (!this.config) {
return;
}
this._setup();
this._buildSVG();
this._populate();
}
}
private _setup() {
this._margin = {
top : 10,
right : 10,
bottom: 10,
left : 10
};
this._width = ((this._htmlElement.parentElement.clientWidth == 0)
? 300
: this._htmlElement.parentElement.clientWidth) - this._margin.left - this._margin.right;
if (this._width < 100) {
this._width = 100;
}
this._height = this._width * 0.75 - this._margin.top - this._margin.bottom;
this._minCount = D3.min(this.config.dataset, d => d.count);
this._maxCount = D3.max(this.config.dataset, d => d.count);
let minFontSize: number = (this.config.settings.minFontSize == null) ? 18 : this.config.settings.minFontSize;
let maxFontSize: number = (this.config.settings.maxFontSize == null) ? 96 : this.config.settings.maxFontSize;
this._fontScale = D3.scaleLinear()
.domain([this._minCount, this._maxCount])
.range([minFontSize, maxFontSize]);
this._fillScale = D3.scaleOrdinal(D3.schemeCategory20);
}
private _buildSVG() {
this._host.html('');
this._svg = this._host
.append('svg')
.attr('width', this._width + this._margin.left + this._margin.right)
.attr('height', this._height + this._margin.top + this._margin.bottom)
.append('g')
.attr('transform', 'translate(' + ~~(this._width/2) + ',' + ~~(this._height/2) + ')');
}
private _populate() {
let fontFace: string = (this.config.settings.fontFace == null) ? 'Roboto' : this.config.settings.fontFace;
let fontWeight: string = (this.config.settings.fontWeight == null) ? 'normal' : this.config.settings.fontWeight;
let spiralType: string = (this.config.settings.spiral == null) ? 'rectangular' : this.config.settings.spiral;
d3.layout.cloud()
.size([this._width, this._height])
.words(this.config.dataset)
.rotate(() => 0)
.font(fontFace)
.fontWeight(fontWeight)
.fontSize(d => this._fontScale(d.count))
.spiral(spiralType)
.on('end',() => {
this._drawWordCloud(this.config.dataset);
})
.start();
}
private _drawWordCloud(words) {
this._svg
.selectAll('text')
.data(words)
.enter()
.append('text')
.style('font-size', d => d.size + 'px')
.style('fill', (d, i) => {
return this._fillScale(i);
})
.attr('text-anchor', 'middle')
.attr('transform', d => 'translate(' + [d.x, d.y] + ')rotate(' + d.rotate + ')')
.attr('class', 'word-cloud')
.text(d => {
return d.word;
});
}
}
谢谢你,现在为我工作。只需要玩图书馆来获得我想要的外观。 –
您是如何在应用程序中包含d3-cloud的?我正在使用带有webpack的angular-cli,因为d3-cloud NPM模块使用'require',因此会窒息。 – ansorensen
@ansorensen您无需“包含”d3-cloud。我只是将''添加到'index.html'中并且访问它使用答案中提到的方法。 –
- 1. D3使用URL引用时的类型错误mbostock.github.com/d3/d3.js
- 2. D3:格式日期类型
- 3. D3 - 事件的图表类型变化
- 4. D3追加所需类型的输入
- 5. d3.js多种类型的盒子
- 6. d3.js中元素的重叠词云
- 7. 使用d3云动态调整大小的字云
- 8. d3滑块包属性滑块不存在类型'typesof d3'
- 9. D3 - 未捕获类型错误:
- 10. 在Google云上更改机器类型
- 11. 自动识别PCL点云类型
- 12. 更新谷歌云SQL实例类型
- 13. D3:词云(方向和旋转)
- 14. d3词云 - 发生太多重叠
- 15. 使用D3.js更新词云
- 16. 与Word云生成器碰撞(D3.JS)
- 17. 角2找不到模块D3-云
- 18. 打字稿D3 - 物业“馅饼”的类型“的typeof D3”不存在
- 19. 类D3的html树
- 20. 春云feign:找不到响应类型的HttpMessageConverter [类org.springframework.web.servlet.ModelAndView]
- 21. 标签云造型
- 22. 基于云的应用程序的Java中的会话类型
- 23. d3.scale.category10()+ d3 +其他颜色类别
- 24. 机器类型为谷歌的云数据流的工作
- 25. 比较D3.js和Highcharts之间的图表类型
- 26. D3中未捕获的类型错误Sankey Drag Function
- 27. 从tsv到json的refactor d3和替换类型函数
- 28. 为d3创建两种不同类型的热图
- 29. d3 topojson webpack中的数据类型不正确/反应
- 30. d3表根据不同的数据类型附加数据
你有没有解决这个问题?在分钟有完全相同的问题 –
@SimonMcLoughlin我确实得到它的工作。在下面发布答案。评论你是否需要更多的说明。 –