nicolas.marsal
4 years ago
6 changed files with 214 additions and 30 deletions
@ -0,0 +1,92 @@ |
|||||||
|
<template> |
||||||
|
<svg :width="width" :height="height"> |
||||||
|
<g :transform="`translate(${width / 2}, ${height / 2})`"> |
||||||
|
<text |
||||||
|
v-for="word in words" |
||||||
|
:key="word.text" |
||||||
|
:style="{ |
||||||
|
fontSize: word.size + 'px', |
||||||
|
fontFamily: word.font, |
||||||
|
}" |
||||||
|
:transform="`translate(${word.x}, ${word.y})rotate(${word.rotate})`" |
||||||
|
text-anchor="middle" |
||||||
|
@click="highlightText(word.text)" |
||||||
|
> |
||||||
|
{{ word.text }} |
||||||
|
</text> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import cloud from "d3-cloud"; |
||||||
|
import * as skills from "@/data/skills"; |
||||||
|
import { defineComponent } from "vue"; |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
props: { |
||||||
|
width: Number, |
||||||
|
height: Number, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
words: [] as cloud.Word[], |
||||||
|
minFontSize: 8, |
||||||
|
maxFontSize: 40, |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.computeWords(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
highlightText(text: string) { |
||||||
|
console.log(text); |
||||||
|
}, |
||||||
|
computeWords() { |
||||||
|
this.loading = true; |
||||||
|
const words = Object.keys(skills) |
||||||
|
.map((p) => skills[p]) |
||||||
|
.map((s) => ({ text: s.name, size: s.score })); |
||||||
|
|
||||||
|
const min = words |
||||||
|
.map((s) => s.size) |
||||||
|
.reduce((prev, current) => Math.min(prev, current)); |
||||||
|
const max = words |
||||||
|
.map((s) => s.size) |
||||||
|
.reduce((prev, current) => Math.max(prev, current)); |
||||||
|
const scaleFontSize = (size: number) => { |
||||||
|
const number = |
||||||
|
((size - min) / (max - min)) * (this.maxFontSize - this.minFontSize) + |
||||||
|
this.minFontSize; |
||||||
|
return number; |
||||||
|
}; |
||||||
|
const randomRotate = (s: number) => { |
||||||
|
const range = 120 * (1 - ((s - min) / (max - min)) * 0.7); |
||||||
|
return Math.random() * range - range / 2; |
||||||
|
}; |
||||||
|
cloud<{ size: number } & cloud.Word>() |
||||||
|
.size([this.width!, this.height!]) |
||||||
|
.words(words) |
||||||
|
.padding(1) |
||||||
|
.rotate((w) => randomRotate(w.size)) |
||||||
|
.spiral("archimedean") |
||||||
|
.fontSize((d) => scaleFontSize(d.size)) |
||||||
|
.on("end", (d: cloud.Word[]) => { |
||||||
|
console.log( |
||||||
|
`d: ${d.length} - w: ${words.length} - f: ${this.maxFontSize}` |
||||||
|
); |
||||||
|
if (d.length < words.length) { |
||||||
|
console.log("On recommence !"); |
||||||
|
this.maxFontSize = this.maxFontSize - 2; |
||||||
|
this.computeWords(); |
||||||
|
} else { |
||||||
|
this.words = d; |
||||||
|
this.loading = false; |
||||||
|
} |
||||||
|
}) |
||||||
|
.start(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
</script> |
||||||
@ -1,11 +0,0 @@ |
|||||||
<template> |
|
||||||
<div>Words Cloud !</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: "WordsCloud", |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped></style> |
|
||||||
Loading…
Reference in new issue