Я пытаюсь понять полученный код. Я думаю, что вроде как прошел через детали. Но все же есть кое-что, чего я действительно не могу понять.
Вещи, которые я не могу понять:
1) svg.node ()
2 ) биссектриса / биссектриса
3) для (пусть i = 0; i
1) svg.node ()
В генераторе 'gen ()' он возвращает svg.node ( ). и он буквально рисует вещи в моем svg (я проверил это, просто раскомментируйте только строку)
Что такое svg.node () и почему мне нужно использовать этот аргумент для рисования чего-либо? потому что обычно, когда я хочу что-то нарисовать, мне просто нужно d3.select ('svg'). append ('###') .... тогда я мог бы что-то нарисовать на своем 'svg', однако, в этом генератор, он использует 'svg.node ()', чтобы что-то нарисовать. Интересно, почему и что такое svg.node ()
function* gen() {
var random = d3.randomNormal(); // Try randomUniform?
const n = 2000;
const width = window.innerWidth;
const height = 400;
const radius = 2;
const dodge = dodger(radius * 2 + 1);
const margin = { top: 0, right: 10, bottom: 20, left: 10 };
const values = Float64Array.from({ length: n }, random);
const x = d3.scaleLinear(d3.extent(values), [
margin.left,
width - margin.right
]);
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("overflow", "visible");
// var fillScale = d3.scaleSequentialLog(chroma.interpolateSinebow)
svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
function dodger(radius) {
const radius2 = radius ** 2;
const bisect = d3.bisector(d => d.x);
const circles = [];
return function(x) {
const l = bisect.left(circles, x - radius);
const r = bisect.right(circles, x + radius);
let y = 0;
for (let i = l; i < r; ++i) {
const { x: xi, y: yi } = circles[i];
const x2 = (xi - x) ** 2;
const y2 = (yi - y) ** 2;
if (radius2 > x2 + y2) {
y = yi + Math.sqrt(radius2 - x2) + 1e-6;
i = l - 1;
continue;
}
}
circles.splice(bisect.left(circles, x, l, r), 0, { x, y });
return y;
};
}
for (let i = 0; i < n; ++i) {
if (i % 5 === 0) yield svg.node();
const cx = x(values[i]); // x(values[i]);
const cy = height - margin.bottom - dodge(cx) - radius - 1;
svg
.append("circle")
.attr("cx", cx)
.attr("cy", -400)
.attr("r", radius)
.attr("fill", "red")
.attr("fill", "#9e0dd7") //purple
.transition()
.duration(650)
.ease(d3.easeBounce)
.attr("cy", cy);
}
yield svg.node();
}
const genratorAnimation = gen();
let result = genratorAnimation.next();
//genratorAnimation.next();
let interval = setInterval(function(){
if(!result.done) {
genratorAnimation.next();
}
else {
clearInterval(interval)
}
}, 50);
2) пополам / пополам / сплайсинг
Не знаю получите логи c, которые код использует для размещения шаров, используя bisect, bisector и splice. Я понимаю, что пополам разбивает индексный номер, что новый объект будет go в массив. (На основе возрастания) сращивания заменяет или вставляет объекты в массив. Тем не менее, я не понимаю, как код позволяет организовать желаемое падение.
3) для (пусть i = 0; i
Я играл с номером, изменив 1 == 0 на 2 == 0 и 10 == 0. Кажется, что уравнение определяет количество шаров, которые будут падать каждый раз. Почему?
Я знаю, что задал слишком много вопросов, и я готов задать несколько раз, публикуя множество вопросов один за другим. Но я был бы очень признателен, если бы кто-нибудь смог ответить.
Заранее спасибо.