Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vue-wordcloud-custom-tooltip
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-custom-tooltip receives a total of 3 weekly downloads. As such, vue-wordcloud-custom-tooltip popularity was classified as not popular.
We found that vue-wordcloud-custom-tooltip 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.