Treemap - clawam tools

Инструменты Документы Daoark EN Главная Главная / Преобразование данных › Главная manifest.json 0; }); var pts = []; for (var i = 0; i < lines.length; i++) { var parts = lines[i].split(/[\s,;\t]+/).filter(function(x) { return x.length > 0; }); if (parts.length >= 2) { var label = parts.slice(0, parts.length - 1).join(' '); pts.push({ label: label, value: parseFloat(parts[parts.length - 1]) }); } } return pts; } function escape(s) { return String(s).replace(/[&<>"']/g, function(c) { return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]; }); } // Squarified treemap function squarify(items, rect) { // items: [{label, value}], rect: {x, y, w, h} var total = items.reduce(function(s, it) { return s + it.value; }, 0); if (total === 0) return []; var result = []; function worstRatio(row, w) { var sum = row.reduce(function(s, it) { return s + it.value; }, 0); var s2 = sum * sum; var w2 = w * w; var maxR = -Infinity, minR = Infinity; for (var i = 0; i < row.length; i++) { var r = Math.max(w2 * row[i].value / s2, s2 / (w2 * row[i].value)); if (r > maxR) maxR = r; if (r < minR) minR = r; } return maxR; } function layoutRow(row, itemsLeft, rect, horizontal) { var sum = row.reduce(function(s, it) { return s + it.value; }, 0); var w = horizontal ? sum / total * rect.w : rect.w; var h = horizontal ? rect.h : sum / total * rect.h; var pos = horizontal ? rect.x : rect.y; var out = []; for (var i = 0; i < row.length; i++) { var size = row[i].value / sum * (horizontal ? w : h); if (horizontal) { out.push({ x: pos, y: rect.y, w: size, h: h, label: row[i].label, value: row[i].value }); } else { out.push({ x: rect.x, y: pos, w: w, h: size, label: row[i].label, value: row[i].value }); } pos += size; } var newRect; if (horizontal) newRect = { x: rect.x + w, y: rect.y, w: rect.w - w, h: h }; else newRect = { x: rect.x, y: rect.y + h, w: w, h: rect.h - h }; return { cells: out, rect: newRect }; } function recurse(items, rect) { if (items.length === 0 || rect.w <= 0 || rect.h <= 0) return []; var horizontal = rect.w < rect.h; var shortSide = Math.min(rect.w, rect.h); var row = []; var bestWorst = Infinity; for (var i = 0; i < items.length; i++) { row.push(items[i]); var w = worstRatio(row, shortSide); if (w > bestWorst) { row.pop(); if (row.length === 0) row.push(items[i]); break; } bestWorst = w; } var lay = layoutRow(row, items.slice(row.length), rect, horizontal); var rest = recurse(items.slice(row.length), lay.rect); return lay.cells.concat(rest); } return recurse(items, rect); } function renderTreemap(pts, title) { if (pts.length === 0) return ''; var W = 720, H = 480; var cells = squarify(pts, { x: 30, y: 50, w: W - 60, h: H - 80 }); var colors = ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#ec4899','#06b6d4','#84cc16','#f97316','#6366f1','#14b8a6','#a855f7']; var svg = ''; return svg; } var currentSVG = ''; function doProcess() { try { var textA = getVal('text-a'); if (!textA) { showError('请输入'); return; } var title = getVal('title'); var pts = parseData(textA); if (pts.length === 0) { showError('无有效数据'); return; } var svg = renderTreemap(pts, title); currentSVG = svg; var total = pts.reduce(function(s, p) { return s + p.value; }, 0); showResult(svg, '类别: ' + pts.length + ', 总值: ' + total); } catch (e) { showError('处理失败: ' + (e.message || e)); } } $('btn-main').addEventListener('click', function(e) { e.preventDefault(); doProcess(); }); $('btn-clear').addEventListener('click', function() { var inputs = document.querySelectorAll('input,textarea,select'); for (var i = 0; i < inputs.length; i++) { if (inputs[i].tagName === 'SELECT') inputs[i].selectedIndex = 0; else inputs[i].value = inputs[i].defaultValue; } var ra = $('result-area'); ra.hidden = true; ra.style.display = 'none'; var em = $('error-msg'); em.hidden = true; em.style.display = 'none'; $('btn-download').style.display = 'none'; }); $('btn-download').addEventListener('click', function() { if (!currentSVG) return; var blob = new Blob([currentSVG], { type: 'image/svg+xml' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'treemap.svg'; a.click(); URL.revokeObjectURL(url); }); })();