open-index/open-npm huggingface dataset:
npm package: @labmai.dev/tag-cloud
Description: 3D TagCloud
Author: hanxiao.zhao
Latest version: 1.1.1


### npm

```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);
```


### 浏览器

```html
<!-- html -->
<script type="text/javascript" src="./dist/TagCloud.min.js"></script>
```

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

## 构造函数

### TagCloud(container, texts, options)

返回 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'`

单位。

## 实例方法

### tagcloud.update(texts)

更新标签文本列表。

### tagcloud.pause()

暂停标签云动画。

### tagcloud.resume()

继续标签云动画。

### tagcloud.destroy()

摧毁标签云实例。

## 自定义事件

### 使用事件委托机制来为标签云子项添加自定义事件

以下是示例，点击标签云子项跳转到 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