HJQ/tianxuan
2
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: 更小窗口组(15-20边)+颜色偏移(hue)让过渡更明显

Browse Source 
- 窗口拆分更细: ~20条/组,最大15个窗口
- 颜色随窗口组偏移hue(15°/组),视觉变化明显
- 去重: 同一边不会在多个窗口重复出现
- 透明度范围扩大(0.4-1.0)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TianXuan Developer
2026-07-25 10:00:53 +08:00
parent 5170c262e1
commit bbecd4a4f1
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
simple_analysis/templates/simple_analysis/simple_analysis.html
+13 -7
View File
@@ -2641,10 +2641,15 @@ function loadTrafficData() {
// If only 1-2 real windows, split edges into artificial windows for crossfade variety // If only 1-2 real windows, split edges into artificial windows for crossfade variety
if (wins.length <= 2 && wins.length > 0) { if (wins.length <= 2 && wins.length > 0) {
const allEdges = []; const allEdges = [];
wins.forEach(w => (w.edges||[]).forEach(e => allEdges.push({...e}))); const seen = new Set();
// Sort by count descending, split into groups of ~60 edges wins.forEach(w => (w.edges||[]).forEach(e => {
const k = e.source + '|' + e.target;
if (!seen.has(k)) { seen.add(k); allEdges.push({...e}); }
}));
allEdges.sort((a,b) => (b.count||0) - (a.count||0)); allEdges.sort((a,b) => (b.count||0) - (a.count||0));
const groupSize = Math.max(40, Math.ceil(allEdges.length / 8)); // More windows with fewer edges each = more visible change
const nWindows = Math.min(20, Math.ceil(allEdges.length / 20));
const groupSize = Math.max(15, Math.ceil(allEdges.length / nWindows));
const newWins = []; const newWins = [];
let ti = minTs; let ti = minTs;
for (let g = 0; g < allEdges.length; g += groupSize) { for (let g = 0; g < allEdges.length; g += groupSize) {
@@ -2828,15 +2833,16 @@ function renderTrafficCrossfade() {
_trafficEdgeCache[e.source+'|'+e.target] = cached; _trafficEdgeCache[e.source+'|'+e.target] = cached;
} }
if (!cached) return; if (!cached) return;
const ratio = e.count / maxCount; const ratio = Math.min(1, e.count / maxCount);
const alpha = 0.3 + 0.6 * e.weight * ratio; const alpha = 0.4 + 0.6 * e.weight;
const hue = 220 + (mix.i % 10) * 15; // color shifts per window group
// Bezier trace // Bezier trace
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(cached.p1x, cached.p1y); ctx.moveTo(cached.p1x, cached.p1y);
ctx.quadraticCurveTo(cached.midX, cached.midY, cached.p2x, cached.p2y); ctx.quadraticCurveTo(cached.midX, cached.midY, cached.p2x, cached.p2y);
ctx.strokeStyle = 'rgba(67,97,238,' + alpha.toFixed(2) + ')'; ctx.strokeStyle = 'hsla(' + hue + ',70%,50%,' + alpha.toFixed(2) + ')';
ctx.lineWidth = 1 + 4 * ratio; ctx.lineWidth = 1.5 + 3 * ratio;
ctx.stroke(); ctx.stroke();
// Particles (continuous, driven by Date.now) // Particles (continuous, driven by Date.now)