@labmai.dev/tag-cloud

$3

``bash
$ npm i -S @labmai.dev/tag-cloud-d3
`

`js
const TagCloud = require('@labmai.dev/tag-cloud-d3');

const container = '.tagcloud';
const texts = [
'3D', 'TagCloud', 'JavaScript',
'CSS3', 'Animation', 'Interactive',
'Mouse', 'Rolling', 'Sphere',
'6KB', 'v2.x',
];
const options = {};

TagCloud(container, texts, options);
`

$3

`html


`

`js
TagCloud(container, texts, options);
`

构造函数

$3

返回 tagcloud 实例。

#### container

类型: String 或 HTMLElement 或 Array

用于构造标签云的容器。

#### texts

类型: Array

初始化时的标签文本列表。

#### options

类型: Object

##### options.radius

类型: Number\
默认值: 100\
单位: px

滚动半径。

##### options.radiusX

类型: Number\
默认值: 100\
单位: px

椭圆滚动半径X。 如果 radiusX 和 radiusY 相等，则滚动为圆形。

##### options.radiusY

类型: Number\
默认值: 100\
单位: px

椭圆滚动半径Y。 如果 radiusX 和 radiusY 相等，则滚动为圆形。

##### options.maxSpeed

可选值: 'slow', 'normal', 'fast'\
默认值: 'normal'

滚动最大速度。

##### options.initSpeed

可选值: 'slow', 'normal', 'fast'\
默认值: 'normal'

滚动初始速度。

##### options.direction

当 radiusX 和 radiusY 不相等时，滚动方向只能填0（上下滚动） 90（左右滚动）。
类型: Number\
默认值: 135 (向右下滚动)\
单位: 顺时针角度 deg

滚动初始方向，例如 0 (向上滚动) , 90 (向左滚动), 135 (向右下滚动) ...

##### options.keep

类型: Boolean\
默认值: true

鼠标移除容器区域时是否保持继续滚动。默认为是 true，减速至初始滚动速度，然后继续随鼠标滚动。

##### options.reverseDirection

类型: Boolean\
默认值: false

当鼠标控制方向时，是否要逆转方向。

##### options.containerClass

类型: String\
默认值: tagcloud

用于 tagcloud 容器的CSS样式 class。

##### options.itemClass

类型: String\
默认值: tagcloud--item

用于 tagcloud 标签项的CSS样式 class。

##### options.useContainerInlineStyles

Type: Boolean\
Default: true

使用正常视图的内联样式添加到 tagcloud 容器上；禁用此选项后，你必须自己添加CSS。

##### options.useItemInlineStyles

类型: Boolean\
默认值: true

使用正常视图的内联样式添加到 tagcloud 标签项上；禁用此选项后，你必须自己添加CSS。

##### options.unit

类型: String\
默认值: 'px'

单位。

实例方法

$3

更新标签文本列表。

$3

暂停标签云动画。

$3

继续标签云动画。

$3

摧毁标签云实例。

自定义事件

$3

以下是示例，点击标签云子项跳转到 Google 去搜索关键字

`javascript
let rootEl = document.querySelector('.content');
rootEl.addEventListener('click', function clickEventHandler(e) {
if (e.target.className === 'tagcloud--item') {
window.open(https://www.google.com/search?q=${e.target.innerText}, '_blank');
// your code here
}
});
``

License

MIT