Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
vue-wordcloud
Advanced tools
Readme
A Vue.js Word Cloud component based on the original d3-cloud plugin.
What's New?
V1.1 Nov 25, 2018:
showTooltip
optionV1.0.2 Aug 12, 2017:
For details please refer to options.
npm install vue-wordcloud
import wordcloud from 'vue-wordcloud'
Using D3 color scheme Category10:
Using single color of your choice, e.g. ['#1f77b4']
:
Using single-hue color of your choice, e.g. ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef']
:
Code:
<template>
<div id="app">
<wordcloud
:data="defaultWords"
nameKey="name"
valueKey="value"
:color="myColors"
:showTooltip="true"
:wordClick="wordClickHandler">
</wordcloud>
</div>
</template>
<script>
import wordcloud from 'vue-wordcloud'
export default {
name: 'app',
components: {
wordcloud
},
methods: {
wordClickHandler(name, value, vm) {
console.log('wordClickHandler', name, value, vm);
}
},
data() {
return {
myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
defaultWords: [{
"name": "Cat",
"value": 26
},
{
"name": "fish",
"value": 19
},
{
"name": "things",
"value": 18
},
{
"name": "look",
"value": 16
},
{
"name": "two",
"value": 15
},
{
"name": "fun",
"value": 9
},
{
"name": "know",
"value": 9
},
{
"name": "good",
"value": 9
},
{
"name": "play",
"value": 6
}
]
}
}
}
</script>
For using D3 categorical color schemes:
<template>
<div id="app">
<wordcloud
:data="defaultWords"
nameKey="name"
valueKey="value"
color="Accent">
</wordcloud>
</div>
</template>
选项 | 简介 | 默认值 | 说明 |
---|---|---|---|
data | 词云文本数据 | defaultWords | 数据格式:数组。数组中每个元素是对象{ 词:数值 } |
nameKey | 数据中表示要显示的词的字段名称 | 'name' | - |
valueKey | 数据中表示词的权重的字段名称 | 'value' | - |
margin | 图表外边矩 | {top: 15, right: 15, bottom: 15, left: 15 } | - |
wordPadding | 词间间距 | 3 | - |
rotate | 词的旋转角度 | {from: -60, to: 60, numOfOrientation: 5 } | 可设置角度范围及角度的个数 |
spiral | 词的布局方式 | 'archimedian' | 可选择'archimedian'或'rectangular' |
fontScale | 词的大小缩放比例 | 'sqrt' | 可选择'sqrt','log'或'n' |
fontSize | 词的字号范围 | [10, 80] | [minSize, maxSize] |
font | 词的字体名称,对应 font-family 的值 | "impact" | 例如,衬线字体'serif',非衬线字体'Arial' |
color | 配色集合,可配置两种类型的值:String (D3 scheme name),或 Array(自定义的颜色列表) | 'Category10' | 可采用D3内置的任意 Category 配色,或自定义的颜色列表;单色可通过传入只有一个颜色的数组实现,详见 examples |
showTooltip | 显示 Tooltip | true | true/false; tooltip 的样式(如宽高、颜色等)可以通过 CSS 类 div.tooltip 配置 |
wordClick | 词的点击事件的回调函数 | null | 函数传入三个变量,第一个是点击的词 text ,第二个是该词对应的权重 value ,第三个是 Vue 实例 vm |
FAQs
A Vue.js Word Cloud component
The npm package vue-wordcloud receives a total of 980 weekly downloads. As such, vue-wordcloud popularity was classified as not popular.
We found that vue-wordcloud demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.