46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
svg = d3.select("svg")
|
|
.attr("width", 2000)
|
|
.attr("height", 2000);
|
|
let w = parseFloat(svg.style('width'));
|
|
let h = parseFloat(svg.style('height'));
|
|
let r = d3.min([w, h]) * 0.1
|
|
|
|
|
|
const getEntry = () => {
|
|
return {
|
|
"x": d3.randomUniform(w)(),
|
|
"y": d3.randomUniform(h)(),
|
|
"r": d3.randomUniform(r)(),
|
|
"color": getRandColor()
|
|
}
|
|
}
|
|
|
|
let data = [];
|
|
for (let i = 0; i < 10; i++) {
|
|
data.push(getEntry());
|
|
}
|
|
|
|
svg.selectAll(".dot").data(data)
|
|
.enter()
|
|
.append("circle")
|
|
.attr("r", d => d.r)
|
|
.attr("cx", d => d.x)
|
|
.attr("cy", d => d.y)
|
|
.style("fill", d => d.color)
|
|
.attr("opacity", 1)
|
|
.transition()
|
|
.duration(2000)
|
|
.ease(d3.easeLinear)
|
|
.attr("r", d => d.r * 3)
|
|
.attr("opacity", 0)
|
|
.on("end",() => {
|
|
svg.attr("style", `background :${getRandColor()}`);
|
|
});
|
|
|
|
})
|
|
|
|
const getRandColor = () => {
|
|
return `rgb(${d3.randomInt(255)()},${d3.randomInt(255)()},${d3.randomInt(255)()})`
|
|
}
|