Problem with render animation graph with allot of information

[tkachenkobog]

Hi all, I need to show info on graph, when I have 30 points (month) I don't have freeze at all, but when I'm trying to show info for hall year (365 points) animation not smoothly ( I already try change animation, and change duration animation - it's not help

Screen.Recording.2022-12-22.at.12.40.19.mov

[Fil]

Usually if the browser starts lagging, it's because it has too many transitions happening at the same time. If you have one transition for each datum, instead of a common transition, maybe that's a problem. Or maybe it's something else. I don't think we can help you a lot from a video capture.

[tkachenkobog]

Part of logic ) maybe its can help )

const withTransition = <A extends d3.BaseType, B, C extends d3.BaseType, D>(selection: d3.Selection<A, B, C, D>) =>
	selection.transition().duration(DURATION).ease(d3.easeCubicOut);
	
const update = (data: UnifiedData) => {
				const prevTimeScale = timeScale.copy();
				const prevYScale = yScale.copy();
				yScale.domain([0, (d3.max(data.bars, d => d.total) || 1000)]).nice();
				timeScale.domain([new Date(data.timeRange.fromDate), new Date(data.timeRange.toDate)]).range([0, innerWidth.value]).nice();

				// Draw axes
				svg.attr("width", width.value);
				rightAxisG.attr("transform", `translate(${MARGIN.left + innerWidth.value}, ${MARGIN.top})`);
				gridLinesG.attr("transform", `translate(${MARGIN.left + innerWidth.value}, ${MARGIN.top})`);
				const yTicks = yScale.ticks(Y_TICKS_NUMBER).filter(Number.isInteger);
				withTransition(leftAxisG).call(d3.axisLeft(yScale).tickSizeOuter(0).tickValues(yTicks).tickFormat(d3.format("d")));
				withTransition(rightAxisG).call(d3.axisRight(yScale).tickSizeOuter(0).tickValues(yTicks).tickFormat(d3.format("d")));
				withTransition(gridLinesG).call(d3.axisLeft(yScale).ticks(7).tickSize(innerWidth.value).tickSizeOuter(0).tickFormat(() => ""));
				withTransition(xAxisG).call(xAxisDateFormat(props.data.timeFilter, timeScale));

				// Draw bars
				barsG.selectAll("g")
					.data(
						data.bars,
						d => (d as BarData).key,
					)
					.join(
						enter => enter
							.append("g")
							.on("mouseover", showTooltip)
							.on("mousemove", moveTooltip)
							.on("mouseleave", hideTooltip)
							.attr("opacity", 0),
						update => update,
						exit => {
							// Here init exit transitions for rects because exit from their own join doesn't work.
							exit.selectAll("rect")
								.data(
									d => d.stack.map(item => ({ ...item, parent: d })),
									d => (d as StackItem).groupKey,
								)
								.call(rects =>
									withTransition(rects)
										.attr("x", d => timeScale(d.parent.barStart))
										.attr("width", d => timeScale(d.parent.barEnd) - timeScale(d.parent.barStart))
										.attr("y", d => yScale(d.upperBound))
										.attr("height", d => yScale(d.lowerBonund) - yScale(d.upperBound))
								);

							withTransition(exit)
								.attr("opacity", 0)
								.remove();
						}
					)
					.call(gs =>
						withTransition(gs)
							.attr("opacity", 1)
							.attr("x", d => timeScale(d.barStart))
							.attr("height", d => yScale(0) - yScale(d.total))
							.attr("y", d => yScale(d.total))
							.attr("width", d => timeScale(d.barEnd) - timeScale(d.barStart))
					)
					.selectAll("rect")
					.data(
						d => d.stack.map(item => ({ ...item, parent: d })),
						d => (d as StackItem).groupKey,
					)
					.join(
						enter => enter
							.append("rect")
							.attr("fill", d => EVENT_TYPE_COLOR_MAP[d.groupKey] || "#858585")
							.attr("x", d => prevTimeScale(d.parent.barStart))
							.attr("width", d => prevTimeScale(d.parent.barEnd) - prevTimeScale(d.parent.barStart))
							.attr("y", d => prevYScale(d.upperBound))
							.attr("height", d => prevYScale(d.lowerBonund) - prevYScale(d.upperBound))
						,
						update => update,
						// exit => ... Whatever I did in this exit had no effect for some reason.
					)
					.call(rects =>
						withTransition(rects)
							.attr("x", d => timeScale(d.parent.barStart))
							.attr("width", d => timeScale(d.parent.barEnd) - timeScale(d.parent.barStart))
							.attr("y", d => yScale(d.upperBound))
							.attr("height", d => yScale(d.lowerBonund) - yScale(d.upperBound))
					);


				// Draw points
				circlesG.selectAll("circle")
					.data(
						data.bars,
						d => (d as BarData).key,
					)
					.join(
						enter => enter
							.append("circle")
							.attr("r", 2.5)
							.attr("stroke", LINE_COLOR)
							.attr("fill", "#fff")
							.attr("opacity", 0)
							.attr("cx", d => prevTimeScale(d.barMiddle))
							.attr("cy", d => prevYScale(d.total))
						,
						update => update,
						exit => withTransition(exit)
							.attr("opacity", 0)
							.attr("cx", d => timeScale(d.barMiddle))
							.attr("cy", d => yScale(d.total))
							.remove()
					)
					.call(circles =>
						withTransition(circles)
							.attr("opacity", 1)
							.attr("cx", d => timeScale(d.barMiddle))
							.attr("cy", d => yScale(d.total))
					);


				// Draw line
				linesG.selectAll("line")
					.data(
						data.segments,
						d => (d as [BarData])[0].key,
					)
					.join(
						enter => enter
							.append("line")
							.attr("stroke", LINE_COLOR)
							.attr("opacity", 0)
							.attr("x1", ([start]) => prevTimeScale(start.barMiddle))
							.attr("y1", ([start]) => prevYScale(start.total))
							.attr("x2", ([_, end]) => prevTimeScale(end.barMiddle))
							.attr("y2", ([_, end]) => prevYScale(end.total))
						,
						update => update,
						exit => withTransition(exit)
							.attr("opacity", 0)
							.attr("x1", ([start]) => timeScale(start.barMiddle))
							.attr("y1", ([start]) => yScale(start.total))
							.attr("x2", ([_, end]) => timeScale(end.barMiddle))
							.attr("y2", ([_, end]) => yScale(end.total))
							.remove()
					)
					.call(lines =>
						withTransition(lines)
							.attr("opacity", 1)
							.attr("x1", ([start]) => timeScale(start.barMiddle))
							.attr("y1", ([start]) => yScale(start.total))
							.attr("x2", ([_, end]) => timeScale(end.barMiddle))
							.attr("y2", ([_, end]) => yScale(end.total))
					);
			};

			update(unifiedData.value);
			watch(unifiedData, update);
			watch(width, () => update(unifiedData.value));
		});

[tkachenkobog]

up) pls help me)

[tkachenkobog]

up)

[Fil]

I'm sorry I can't help you with just "part of logic" which I can't reproduce locally. Maybe you'll get more success in your question if you shared a notebook or codepen that allowed people to just run and tweak the code directly.