Update
This commit is contained in:
rodič
179dd0bf19
revize
143d1d2567
|
@ -1,11 +1,14 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount, onDestroy } from "svelte";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import cloud from "d3-cloud";
|
import cloud from "d3-cloud";
|
||||||
import { select } from "d3-selection";
|
import { select } from "d3-selection";
|
||||||
import { scaleOrdinal } from "d3-scale";
|
import { scaleOrdinal } from "d3-scale";
|
||||||
import * as CS from "d3-scale-chromatic";
|
import * as CS from "d3-scale-chromatic";
|
||||||
|
|
||||||
|
$: outerWidth = 0;
|
||||||
|
$: innerWidth = 0;
|
||||||
|
|
||||||
// event dispatcher
|
// event dispatcher
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
@ -24,8 +27,8 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
// props
|
// props
|
||||||
export let words = [];
|
|
||||||
export let width = 900;
|
export let width = 900;
|
||||||
|
export let words = [];
|
||||||
export let height = 250;
|
export let height = 250;
|
||||||
export let font = "Montserrat";
|
export let font = "Montserrat";
|
||||||
export let maxFontSize = 40;
|
export let maxFontSize = 40;
|
||||||
|
@ -49,8 +52,13 @@
|
||||||
const onWordMouseOut = (d) => dispatch("mouseout", d);
|
const onWordMouseOut = (d) => dispatch("mouseout", d);
|
||||||
const onWordMouseMove = (d) => dispatch("mousemove", d);
|
const onWordMouseMove = (d) => dispatch("mousemove", d);
|
||||||
|
|
||||||
const layout = cloud()
|
$: cwidth =
|
||||||
.size([width, height])
|
outerWidth > 1152 ? 1000 : outerWidth > 500 ? outerWidth - 100 : width - 50;
|
||||||
|
$: cheight = cwidth < 800 ? 400 : cwidth < 500 ? 600 : 250;
|
||||||
|
|
||||||
|
function makeLayout() {
|
||||||
|
return cloud()
|
||||||
|
.size([cwidth, cheight])
|
||||||
.words(words)
|
.words(words)
|
||||||
.padding(padding)
|
.padding(padding)
|
||||||
.rotate(() => ~~(Math.random() * maxRotate) + minRotate)
|
.rotate(() => ~~(Math.random() * maxRotate) + minRotate)
|
||||||
|
@ -58,10 +66,14 @@
|
||||||
.fontSize(
|
.fontSize(
|
||||||
//(d) => Math.floor((d.count / maxWordCount) * maxFontSize)
|
//(d) => Math.floor((d.count / maxWordCount) * maxFontSize)
|
||||||
(d) => d.count + 15
|
(d) => d.count + 15
|
||||||
)
|
);
|
||||||
.on("end", draw);
|
}
|
||||||
|
|
||||||
|
let layout = null;
|
||||||
|
|
||||||
function draw(words) {
|
function draw(words) {
|
||||||
|
select("#wordcloud").selectAll("*").remove();
|
||||||
|
|
||||||
select("#wordcloud")
|
select("#wordcloud")
|
||||||
.append("svg")
|
.append("svg")
|
||||||
.attr("width", layout.size()[0])
|
.attr("width", layout.size()[0])
|
||||||
|
@ -91,17 +103,41 @@
|
||||||
.on("mousemove", onWordMouseMove);
|
.on("mousemove", onWordMouseMove);
|
||||||
}
|
}
|
||||||
|
|
||||||
// mount
|
function drawAll() {
|
||||||
onMount(async () => {
|
layout = makeLayout().on("end", draw);
|
||||||
layout.start();
|
layout.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
// mount
|
||||||
|
let show = false;
|
||||||
|
let interval = null;
|
||||||
|
onMount(async () => {
|
||||||
|
let fwidth = 0;
|
||||||
|
setTimeout(() => {
|
||||||
|
show = true;
|
||||||
|
interval = setInterval(() => {
|
||||||
|
if (outerWidth !== fwidth) {
|
||||||
|
drawAll();
|
||||||
|
fwidth = outerWidth;
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
clearTimeout(interval);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<svelte:window bind:innerWidth bind:outerWidth />
|
||||||
|
|
||||||
|
<div class="height: {cheight}px;">
|
||||||
<div
|
<div
|
||||||
id="wordcloud"
|
id="wordcloud"
|
||||||
style="background-color: {backgroundColor};"
|
style="background-color: {backgroundColor}; width: {cwidth}px; height: {cheight}px;"
|
||||||
class="justify-end"
|
class="justify-end"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
div#wordcloud {
|
div#wordcloud {
|
||||||
|
|
|
@ -31,7 +31,6 @@
|
||||||
i.count = Math.round(i.count / (max / 40));
|
i.count = Math.round(i.count / (max / 40));
|
||||||
return i;
|
return i;
|
||||||
});
|
});
|
||||||
console.log(arr);
|
|
||||||
return arr;
|
return arr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Načítá se…
Odkázat v novém úkolu