Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type24_bump_chart/bump_plain_chart_01.js

@@ -0,0 +1,522 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Bump Chart",
+    "chart_name": "bump_chart_05",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    // 获取颜色
+    const getColor = (group) => {
+        const referencePalette = ["#1F66B3", "#EA5B55", "#E0A315", "#7E5BB6", "#24A37B", "#4965C8", "#D34A8B", "#5E7D2B", "#2F8EA3", "#B65D2E"];
+        const paletteIndex = typeof groups !== "undefined" ? groups.indexOf(group) : -1;
+        if (paletteIndex >= 0) {
+            return referencePalette[paletteIndex % referencePalette.length];
+        }
+        return colorResolver.field(group, 0, { fallbackKey: "primary", fallback: "#888" }).value;
+    };
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 设置尺寸和边距 - 左侧预留参考图中的排行、图标槽和标签列
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 70, right: 32, bottom: 45, left: 285 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 获取字段名
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 获取唯一的组值和X值
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    const xValues = [...new Set(chartData.map(d => d[xField]))]
+        .sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b));
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表组
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const { xScale, xTicks, xFormat, timeSpan } = createXAxisScaleAndTicks(chartData, xField, 0, innerWidth);
+    
+    // 为每个组分配固定位置 (1到groups.length)
+    const fixedGroupPositions = {};
+    groups.forEach((group, i) => {
+        fixedGroupPositions[group] = i + 1;
+    });
+    
+    // 1. 计算每个x下各group的排名
+    // 构建排名数据结构：{ group1: [{x, rank}], group2: ... }
+    const rankData = {};
+    
+    // 初始化每个group的数据结构
+    groups.forEach(group => {
+        rankData[group] = [];
+    });
+    
+    // 为每个时间点和每个组创建排名数据
+    xValues.forEach(x => {
+        // 取出该x下所有group的数据
+        const items = chartData.filter(d => d[xField] === x);
+        
+        // 记录该时间点存在的组
+        const existingGroups = items.map(d => d[groupField]);
+        
+        // 按yField降序排序（y越大排名越高）
+        items.sort((a, b) => b[yField] - a[yField]);
+        
+        // 为有数据的组计算排名
+        const rankByGroup = {};
+        items.forEach((d, i) => {
+            rankByGroup[d[groupField]] = i + 1; // 排名从1开始
+        });
+        
+        // 为每个组添加排名数据，无论是否存在
+        groups.forEach(group => {
+            if (existingGroups.includes(group)) {
+                // 该组在该时间点有数据
+                const dataItem = items.find(d => d[groupField] === group);
+                rankData[group].push({
+                    x: x,
+                    rank: rankByGroup[group],
+                    value: dataItem[yField],
+                    missing: false
+                });
+            } else {
+                // 该组在该时间点没有数据
+                
+                // 查找该组最近的有效排名
+                let nearestRank = null;
+                // 先尝试找前一个时间点的排名
+                const groupData = rankData[group];
+                if (groupData && groupData.length > 0) {
+                    const lastValidPoint = [...groupData].reverse().find(d => !d.missing);
+                    if (lastValidPoint) {
+                        nearestRank = lastValidPoint.rank;
+                    }
+                }
+                
+                // 如果找不到有效的历史排名，使用固定位置
+                if (nearestRank === null) {
+                    nearestRank = fixedGroupPositions[group];
+                }
+                
+                rankData[group].push({
+                    x: x,
+                    rank: nearestRank, // 使用最近的有效排名或固定位置
+                    value: null,
+                    missing: true
+                });
+            }
+        });
+    });
+    
+    // 对每个组的数据按x值排序
+    groups.forEach(group => {
+        rankData[group].sort((a, b) => {
+            const dateA = chartUtils.format.parseDate(a.x);
+            const dateB = chartUtils.format.parseDate(b.x);
+            return dateA - dateB;
+        });
+    });
+
+    // 2. y轴比例尺：排名（1在顶部）
+    const yScale = d3.scaleLinear()
+        .domain([1, groups.length])
+        .range([0, innerHeight]);
+
+    const rowStep = groups.length > 1 ? innerHeight / (groups.length - 1) : innerHeight;
+    const rowBandHeight = Math.max(34, Math.min(88, rowStep * 0.72));
+    const rowBandX = -margin.left + 12;
+    const rowBandW = width - 24;
+    const tabW = Math.max(26, Math.min(40, rowBandHeight * 0.46));
+    const iconR = Math.max(12, Math.min(25, rowBandHeight * 0.30));
+    const iconX = rowBandX + tabW + iconR + 18;
+    const labelX = iconX + iconR + 18;
+    const triangleX = Math.min(-26, labelX + 108);
+    const labelMaxWidth = Math.max(118, Math.min(155, innerWidth * 0.36));
+
+    const truncateToWidth = (text, maxWidth, fontSize, fontWeight = "700") => {
+        const value = String(text);
+        if (chartUtils.text.measure(null, value, { fontSize, fontWeight }).width <= maxWidth) {
+            return value;
+        }
+        let trimmed = value;
+        while (trimmed.length > 3 && chartUtils.text.measure(null, `${trimmed}...`, { fontSize, fontWeight }).width > maxWidth) {
+            trimmed = trimmed.slice(0, -1);
+        }
+        return `${trimmed}...`;
+    };
+
+    const wrapToLines = (text, maxWidth, fontSize, fontWeight = "800", maxLines = 2) => {
+        const words = String(text).split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const candidate = current ? `${current} ${word}` : word;
+            if (chartUtils.text.measure(null, candidate, { fontSize, fontWeight }).width <= maxWidth || !current) {
+                current = candidate;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length <= maxLines) {
+            return lines;
+        }
+        const kept = lines.slice(0, maxLines);
+        kept[maxLines - 1] = truncateToWidth(kept[maxLines - 1], maxWidth, fontSize, fontWeight);
+        return kept;
+    };
+
+    const defs = svg.append("defs");
+    const shadow = defs.append("filter")
+        .attr("id", "bump05-card-shadow")
+        .attr("x", "-10%")
+        .attr("y", "-20%")
+        .attr("width", "120%")
+        .attr("height", "150%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 4)
+        .attr("stdDeviation", 7)
+        .attr("flood-color", "#12315A")
+        .attr("flood-opacity", 0.08);
+
+    groups.forEach((group, i) => {
+        const rowY = yScale(fixedGroupPositions[group]);
+        const color = getColor(group);
+        g.append("rect")
+            .attr("class", "bump-row-band")
+            .attr("x", rowBandX)
+            .attr("y", rowY - rowBandHeight / 2)
+            .attr("width", rowBandW)
+            .attr("height", rowBandHeight)
+            .attr("rx", Math.min(22, rowBandHeight / 2))
+            .attr("fill", i % 2 === 0 ? "#F7FAFE" : "#FFFFFF")
+            .attr("filter", "url(#bump05-card-shadow)");
+
+        g.append("rect")
+            .attr("class", "bump-rank-tab")
+            .attr("x", rowBandX)
+            .attr("y", rowY - rowBandHeight / 2)
+            .attr("width", tabW)
+            .attr("height", rowBandHeight)
+            .attr("rx", Math.min(18, rowBandHeight / 2))
+            .attr("fill", color)
+            .attr("opacity", 0.92);
+        g.append("rect")
+            .attr("x", rowBandX + tabW - Math.min(18, rowBandHeight / 2))
+            .attr("y", rowY - rowBandHeight / 2)
+            .attr("width", Math.min(18, rowBandHeight / 2))
+            .attr("height", rowBandHeight)
+            .attr("fill", color)
+            .attr("opacity", 0.92);
+        g.append("text")
+            .attr("class", "bump-rank-label")
+            .attr("x", rowBandX + tabW / 2)
+            .attr("y", rowY + 6)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-weight", "800")
+            .attr("font-size", Math.max(14, Math.min(28, rowBandHeight * 0.34)))
+            .attr("fill", "#FFFFFF")
+            .text(i + 1);
+
+        const slot = g.append("g")
+            .attr("class", "reserved-asset-slot bump-group-icon-slot")
+            .attr("data-asset-slot", "group-icon")
+            .attr("data-asset-source-policy", "neutral_placeholder")
+            .attr("data-anchor", `row-${i + 1}-label-center`)
+            .attr("data-collision-rule", "stay inside row band and left of plotted rank lines")
+            .attr("transform", `translate(${iconX},${rowY})`);
+        slot.append("circle")
+            .attr("r", iconR)
+            .attr("fill", "#EEF5FF")
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 3);
+        slot.append("circle")
+            .attr("r", iconR * 0.62)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 2)
+            .attr("opacity", 0.32);
+        slot.append("text")
+            .attr("text-anchor", "middle")
+            .attr("dy", "0.35em")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", Math.max(8, iconR * 0.50))
+            .attr("font-weight", "800")
+            .attr("fill", color)
+            .text(String(group).trim().slice(0, 1).toUpperCase());
+    });
+
+    // 3. 绘制线条
+    groups.forEach(group => {
+        const groupRanks = rankData[group];
+        
+        // 使用定义的线条生成器来创建中断的线条
+        const lineGenerator = d3.line()
+            .x(d => xScale(chartUtils.format.parseDate(d.x)))
+            .y(d => yScale(d.rank))
+            .defined(d => !d.missing); // 只在有效数据点之间绘制线条
+            
+        g.append("path")
+            .datum(groupRanks)
+            .attr("fill", "none")
+            .attr("stroke", getColor(group))
+            .attr("stroke-width", Math.max(3, Math.min(5, rowBandHeight * 0.06)))
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("opacity", 0.96)
+            .attr("d", lineGenerator);
+        
+        // 计算y值的范围用于缩放圆点大小
+        const yValues = chartData.map(d => +d[yField]).filter(d => d !== null && d !== undefined);
+        const yMin = Math.min(...yValues);
+        const yMax = Math.max(...yValues);
+        const radiusScale = d3.scaleLinear()
+            .domain([yMin, yMax])
+            .range([
+                Math.max(7, Math.min(14, rowBandHeight * 0.17)),
+                Math.max(11, Math.min(24, rowBandHeight * 0.30))
+            ]);
+
+        // 为每个组生成一个安全的CSS类名
+        const safeGroupId = `group-${groups.indexOf(group)}`;
+
+        // 绘制每个点的圆点 - 只绘制非缺失的点
+        g.selectAll(`.dot-${safeGroupId}`)
+            .data(groupRanks.filter(d => !d.missing))
+            .enter()
+            .append("circle")
+            .attr("class", `dot-${safeGroupId}`)
+            .attr("cx", d => xScale(chartUtils.format.parseDate(d.x)))
+            .attr("cy", d => yScale(d.rank))
+            .attr("r", d => radiusScale(d.value))
+            .attr("fill", getColor(group))
+            .attr("stroke", "#fff")
+            .attr("stroke-width", Math.max(2, Math.min(4, rowBandHeight * 0.05)));
+
+        // 添加数值标签 - 只为非缺失的点添加
+        g.selectAll(`.label-${safeGroupId}`)
+            .data(groupRanks.filter(d => !d.missing))
+            .enter()
+            .append("text")
+            .attr("class", `label-${safeGroupId}`)
+            .attr("x", d => xScale(chartUtils.format.parseDate(d.x)))
+            .attr("y", d => {
+                const radius = radiusScale(d.value);
+                return radius < 10 ? yScale(d.rank) - radius - 5 : yScale(d.rank);
+            })
+            .attr("text-anchor", "middle")
+            .attr("dy", d => {
+                const radius = radiusScale(d.value);
+                return radius < 10 ? "0" : "0.35em";
+            })
+            .attr("font-size", "12px")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("fill", d => {
+                const radius = radiusScale(d.value);
+                if (radius < 10) {
+                    return "#0B172A"; // 小圆点外的标签使用深色
+                } else {
+                    // 大圆点内的标签根据背景亮度选择颜色
+                    const luminance = chartUtils.color.brightness(getColor(group));
+                    return luminance > 0.62 ? "#0B172A" : "#fff";
+                }
+            })
+            .attr("font-weight", "800")
+            .text(d => chartUtils.format.integer(d.value).text);
+    });
+
+    // 优化时间标签���免重叠
+    const optimizeTimeLabels = (ticks, format, availableWidth) => {
+        if (ticks.length <= 1) return ticks;
+        
+        // 计算所有标签的宽度
+        const calculateLabelWidth = (tick) => {
+            return chartUtils.text.measure(g, format(tick), { fontSize: 13, fontWeight: "700" }).width + 8; // 添加一些边距
+        };
+        
+        const tickWidths = ticks.map(tick => calculateLabelWidth(tick));
+        
+        // 检查是否会重叠
+        let willOverlap = false;
+        let positions = ticks.map(t => xScale(t));
+        
+        for (let i = 0; i < positions.length - 1; i++) {
+            const gap = positions[i+1] - positions[i];
+            if (gap < (tickWidths[i] + tickWidths[i+1]) / 2) {
+                willOverlap = true;
+                break;
+            }
+        }
+        
+        // 如果不会重叠，显示所有标签
+        if (!willOverlap) {
+            return ticks;
+        }
+        
+        // 计算可以显示的标签数量
+        const averageWidth = tickWidths.reduce((a, b) => a + b, 0) / ticks.length;
+        let maxLabels = Math.floor(availableWidth / averageWidth);
+        
+        // 确保至少显示首尾标签
+        if (maxLabels <= 2) {
+            return [ticks[0], ticks[ticks.length - 1]];
+        }
+        
+        // 均匀选择标签
+        const step = Math.ceil(ticks.length / maxLabels);
+        const optimizedTicks = [];
+        
+        for (let i = 0; i < ticks.length; i += step) {
+            optimizedTicks.push(ticks[i]);
+        }
+        
+        // 确保包含最后一个标签
+        if (optimizedTicks[optimizedTicks.length - 1] !== ticks[ticks.length - 1]) {
+            optimizedTicks.push(ticks[ticks.length - 1]);
+        }
+        
+        return optimizedTicks;
+    };
+    
+    const enforceTickGap = (ticks, minGap) => {
+        const kept = [];
+        ticks.forEach((tick, index) => {
+            const currentX = xScale(tick);
+            if (!kept.length) {
+                kept.push(tick);
+                return;
+            }
+            const previousX = xScale(kept[kept.length - 1]);
+            if (currentX - previousX >= minGap) {
+                kept.push(tick);
+                return;
+            }
+            if (index === ticks.length - 1) {
+                kept[kept.length - 1] = tick;
+            }
+        });
+        return kept;
+    };
+
+    // 优化时间标签
+    const optimizedXTicks = enforceTickGap(optimizeTimeLabels(xTicks, xFormat, innerWidth), 38);
+
+    // 添加顶部时间轴导轨和时间标签
+    const axisY = -38;
+    g.append("line")
+        .attr("class", "bump-time-rail")
+        .attr("x1", xScale(optimizedXTicks[0]))
+        .attr("x2", Math.min(innerWidth + 14, xScale(optimizedXTicks[optimizedXTicks.length - 1]) + 14))
+        .attr("y1", axisY)
+        .attr("y2", axisY)
+        .attr("stroke", "#C7CDD6")
+        .attr("stroke-width", 1.5)
+        .attr("stroke-linecap", "round");
+    g.append("path")
+        .attr("d", `M${Math.min(innerWidth + 14, xScale(optimizedXTicks[optimizedXTicks.length - 1]) + 14)},${axisY} l-8,-5 v10 z`)
+        .attr("fill", "#A8B0BA");
+    optimizedXTicks.forEach(tick => {
+        g.append("circle")
+            .attr("class", "bump-time-dot")
+            .attr("cx", xScale(tick))
+            .attr("cy", axisY)
+            .attr("r", 4)
+            .attr("fill", "#A8B0BA")
+            .attr("stroke", "#F8FAFC")
+            .attr("stroke-width", 1.5);
+        g.append("text")
+            .attr("x", xScale(tick))
+            .attr("y", axisY - 16)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", 13)
+            .attr("font-weight", "700")
+            .attr("fill", "#59616D")
+            .text(xFormat(tick));
+    });
+    // 4. 绘制group标签和三角形标记，固定在左侧卡片栏内以避免与线/点重叠
+    groups.forEach((group, i) => {
+        const fixedRank = fixedGroupPositions[group];
+        const rowY = yScale(fixedRank);
+        
+        // 添加三角形标记（指向右侧）
+        g.append("path")
+            .attr("d", "M0,-5 L10,0 L0,5 Z")
+            .attr("transform", `translate(${triangleX},${rowY})`)
+            .attr("fill", getColor(group));
+            
+        // 添加group标签
+        const labelFontSize = Math.max(10, Math.min(17, rowBandHeight * 0.22));
+        const labelLines = wrapToLines(group, labelMaxWidth, labelFontSize, "800", rowBandHeight > 50 ? 2 : 1);
+        const labelText = g.append("text")
+            .attr("x", labelX)
+            .attr("y", rowY - ((labelLines.length - 1) * labelFontSize * 0.56))
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-weight", "800")
+            .attr("font-size", labelFontSize)
+            .attr("fill", getColor(group));
+        labelLines.forEach((line, lineIndex) => {
+            labelText.append("tspan")
+                .attr("x", labelX)
+                .attr("dy", lineIndex === 0 ? 0 : labelFontSize * 1.08)
+                .text(line);
+        });
+    });
+
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/type24_bump_chart/bump_plain_chart_02.js

@@ -0,0 +1,423 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Bump Chart",
+    "chart_name": "bump_plain_chart_02",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [4, 12],
+        [0, "inf"],
+        [3, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    const width = Number(variables.width) || 600;
+    const height = Number(variables.height) || 600;
+
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+
+    const referencePalette = [
+        "#14AAA9",
+        "#F2A400",
+        "#2E86CF",
+        "#E94E67",
+        "#7657D1",
+        "#36A96F",
+        "#D9589D",
+        "#5669B8",
+        "#E27A3F",
+        "#238C9D"
+    ];
+
+    const groups = [];
+    chartData.forEach(d => {
+        const group = String(d[groupField]);
+        if (!groups.includes(group)) groups.push(group);
+    });
+
+    const makeClassSafe = value => String(value).replace(/[^a-z0-9]/gi, "_");
+    const chronologicalKey = value => {
+        const parsed = chartUtils.format.parseDate(value);
+        const time = parsed instanceof Date ? parsed.getTime() : Number(parsed);
+        if (Number.isFinite(time)) return time;
+        const numeric = Number(value);
+        if (Number.isFinite(numeric)) return numeric;
+        return String(value);
+    };
+    const xValues = Array.from(new Set(chartData.map(d => d[xField])))
+        .sort((a, b) => {
+            const ka = chronologicalKey(a);
+            const kb = chronologicalKey(b);
+            if (typeof ka === "number" && typeof kb === "number") return ka - kb;
+            return String(a).localeCompare(String(b));
+        });
+    const xKey = value => String(value);
+
+    const getColor = group => {
+        const idx = groups.indexOf(String(group));
+        if (idx >= 0) return referencePalette[idx % referencePalette.length];
+        return colorResolver.field(group, 0, { fallbackKey: "primary", fallback: "#14AAA9" }).value;
+    };
+    const luminance = hex => {
+        const clean = String(hex).replace("#", "");
+        if (clean.length < 6) return 0.45;
+        const rgb = [0, 2, 4].map(i => parseInt(clean.slice(i, i + 2), 16) / 255);
+        return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
+    };
+    const measure = (text, fontSize, fontWeight = "700") => {
+        return chartUtils.text.measure(null, String(text), { fontSize, fontWeight }).width;
+    };
+    const fitText = (text, maxWidth, fontSize, fontWeight = "700") => {
+        const value = String(text);
+        if (measure(value, fontSize, fontWeight) <= maxWidth) return value;
+        let trimmed = value;
+        while (trimmed.length > 2 && measure(`${trimmed}...`, fontSize, fontWeight) > maxWidth) {
+            trimmed = trimmed.slice(0, -1);
+        }
+        return `${trimmed}...`;
+    };
+    const yearLabel = value => chartUtils.format.value(value).text;
+    const valueLabel = value => chartUtils.format.integer(value).text;
+
+    d3.select(containerSelector).html("");
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const defs = svg.append("defs");
+    const cardShadow = defs.append("filter")
+        .attr("id", "bump02-card-shadow")
+        .attr("x", "-20%")
+        .attr("y", "-25%")
+        .attr("width", "140%")
+        .attr("height", "160%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 6)
+        .attr("stdDeviation", 8)
+        .attr("flood-color", "#244A64")
+        .attr("flood-opacity", 0.14);
+
+    const nodeShadow = defs.append("filter")
+        .attr("id", "bump02-node-shadow")
+        .attr("x", "-25%")
+        .attr("y", "-25%")
+        .attr("width", "150%")
+        .attr("height", "150%");
+    nodeShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 3)
+        .attr("stdDeviation", 3.5)
+        .attr("flood-color", "#14384F")
+        .attr("flood-opacity", 0.20);
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "none");
+
+    const decor = svg.append("g")
+        .attr("class", "bump02-background-decoration")
+        .attr("aria-hidden", "true");
+    decor.append("path")
+        .attr("d", `M0,${height * 0.83} C${width * 0.16},${height * 0.77} ${width * 0.22},${height * 0.90} ${width * 0.42},${height * 0.84} C${width * 0.64},${height * 0.78} ${width * 0.78},${height * 0.84} ${width},${height * 0.75} L${width},${height} L0,${height} Z`)
+        .attr("fill", "#DDF2F8")
+        .attr("opacity", 0.62);
+    decor.append("path")
+        .attr("d", `M0,${height * 0.90} C${width * 0.20},${height * 0.86} ${width * 0.31},${height * 0.96} ${width * 0.55},${height * 0.90} C${width * 0.78},${height * 0.85} ${width * 0.88},${height * 0.93} ${width},${height * 0.88} L${width},${height} L0,${height} Z`)
+        .attr("fill", "#CFEAF4")
+        .attr("opacity", 0.56);
+    const dotGroups = [
+        { x: width - 74, y: 30 },
+        { x: 22, y: 150 }
+    ];
+    dotGroups.forEach(group => {
+        const g = decor.append("g").attr("transform", `translate(${group.x},${group.y})`);
+        d3.range(5).forEach(row => {
+            d3.range(5).forEach(col => {
+                g.append("circle")
+                    .attr("cx", col * 11)
+                    .attr("cy", row * 11)
+                    .attr("r", 2.2)
+                    .attr("fill", "#8FC7E9")
+                    .attr("opacity", 0.46);
+            });
+        });
+    });
+
+    const rowCount = Math.max(groups.length, 1);
+    const chartTop = 20;
+    const chartBottom = height - 76;
+    const plotX0 = Math.max(220, width * 0.37);
+    const plotX1 = width - 44;
+    const xScale = d3.scalePoint()
+        .domain(xValues.map(xKey))
+        .range([plotX0, plotX1])
+        .padding(0.14);
+    const yScale = d3.scalePoint()
+        .domain(groups)
+        .range([chartTop + 72, chartBottom])
+        .padding(0.08);
+    const rowStep = rowCount > 1 ? Math.abs(yScale(groups[1]) - yScale(groups[0])) : 78;
+    const rowCardH = Math.max(48, Math.min(66, rowStep * 0.64));
+    const rowCardX = 28;
+    const rowCardW = Math.max(148, Math.min(174, plotX0 - rowCardX - 20));
+    const iconR = Math.max(16, Math.min(23, rowCardH * 0.32));
+
+    const yearLayer = svg.append("g")
+        .attr("class", "bump02-year-axis")
+        .attr("data-coordinate-relationship", "grid-aligned-to-chronological-year-columns");
+    const guideTop = chartTop + 48;
+    const guideBottom = chartBottom + 24;
+    xValues.forEach(value => {
+        const x = xScale(xKey(value));
+        yearLayer.append("line")
+            .attr("class", "bump02-year-guide")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", guideTop)
+            .attr("y2", guideBottom)
+            .attr("stroke", "#B8DDF1")
+            .attr("stroke-width", 1.5)
+            .attr("stroke-dasharray", "3 6")
+            .attr("opacity", 0.82);
+        const chipW = Math.max(56, Math.min(74, (plotX1 - plotX0) / Math.max(xValues.length, 1) * 0.86));
+        yearLayer.append("rect")
+            .attr("class", "bump02-year-chip")
+            .attr("x", x - chipW / 2)
+            .attr("y", chartTop + 18)
+            .attr("width", chipW)
+            .attr("height", 27)
+            .attr("rx", 9)
+            .attr("fill", "#E3F2FA")
+            .attr("opacity", 0.86);
+        yearLayer.append("text")
+            .attr("class", "bump02-year-label")
+            .attr("x", x)
+            .attr("y", chartTop + 37)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", 14)
+            .attr("font-weight", 800)
+            .attr("fill", "#071B43")
+            .text(yearLabel(value));
+    });
+
+    const byGroupYear = new Map();
+    chartData.forEach(d => {
+        byGroupYear.set(`${String(d[groupField])}__${xKey(d[xField])}`, d);
+    });
+    const yValues = chartData.map(d => Number(d[yField])).filter(Number.isFinite);
+    const yMin = d3.min(yValues) || 0;
+    const yMax = d3.max(yValues) || 1;
+    const sizeScale = d3.scaleSqrt()
+        .domain([yMin, yMax])
+        .range([24, 44]);
+
+    const rowLayer = svg.append("g")
+        .attr("class", "bump02-row-cards")
+        .attr("data-coordinate-relationship", "centerline-aligned-row-cards");
+    groups.forEach((group, i) => {
+        const y = yScale(group);
+        const color = getColor(group);
+        const slotX = rowCardX + 22;
+        const slotY = y - iconR;
+        rowLayer.append("rect")
+            .attr("class", "bump02-left-card")
+            .attr("x", rowCardX)
+            .attr("y", y - rowCardH / 2)
+            .attr("width", rowCardW)
+            .attr("height", rowCardH)
+            .attr("rx", rowCardH / 2)
+            .attr("fill", "#FFFFFF")
+            .attr("filter", "url(#bump02-card-shadow)")
+            .attr("data-group", group)
+            .attr("data-row-index", i + 1);
+        const wedgeX = rowCardX + rowCardW - 20;
+        rowLayer.append("path")
+            .attr("class", "bump02-left-card-wedge")
+            .attr("d", `M${wedgeX},${y - rowCardH / 2} L${rowCardX + rowCardW},${y} L${wedgeX},${y + rowCardH / 2} Q${rowCardX + rowCardW - 5},${y} ${wedgeX},${y - rowCardH / 2} Z`)
+            .attr("fill", color);
+        rowLayer.append("g")
+            .attr("class", "reserved-asset-slot bump02-row-icon-slot")
+            .attr("data-asset-slot", `row-icon-${i + 1}`)
+            .attr("data-reserved-slot", `row_icon_${i + 1}`)
+            .attr("data-asset-source-policy", "image2_asset")
+            .attr("data-anchor", `row-card-${i + 1}-centerline`)
+            .attr("data-bbox", `${slotX - iconR},${slotY},${iconR * 2},${iconR * 2}`)
+            .attr("data-collision-rule", "stay inside left row card; avoid rank text, group label, colored wedge, and first-year node")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .call(slot => {
+                slot.append("circle")
+                    .attr("cx", slotX)
+                    .attr("cy", y)
+                    .attr("r", iconR)
+                    .attr("fill", "#FFFFFF")
+                    .attr("stroke", color)
+                    .attr("stroke-width", 2);
+                slot.append("circle")
+                    .attr("cx", slotX)
+                    .attr("cy", y)
+                    .attr("r", Math.max(4, iconR * 0.18))
+                    .attr("fill", color)
+                    .attr("opacity", 0.18);
+                slot.append("circle")
+                    .attr("class", "reserved-slot-anchor")
+                    .attr("cx", slotX)
+                    .attr("cy", y)
+                    .attr("r", 1.8)
+                    .attr("fill", color)
+                    .attr("opacity", 0.45);
+            });
+        const textX = rowCardX + 72;
+        const labelMaxW = Math.max(62, rowCardW - 96);
+        const baseLabelFont = Math.max(14, Math.min(19, rowCardH * 0.30));
+        let labelFont = baseLabelFont;
+        while (labelFont > 11 && measure(String(group), labelFont, "800") > labelMaxW) {
+            labelFont -= 1;
+        }
+        rowLayer.append("text")
+            .attr("class", "bump02-row-rank")
+            .attr("x", textX)
+            .attr("y", y - 4)
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", Math.max(16, Math.min(22, rowCardH * 0.34)))
+            .attr("font-weight", 900)
+            .attr("fill", color)
+            .text(i + 1);
+        rowLayer.append("text")
+            .attr("class", "bump02-row-label")
+            .attr("x", textX)
+            .attr("y", y + 18)
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", labelFont)
+            .attr("font-weight", 800)
+            .attr("fill", color)
+            .text(fitText(group, labelMaxW, labelFont, "800"));
+    });
+
+    const markLayer = svg.append("g")
+        .attr("class", "bump02-marks")
+        .attr("data-coordinate-relationship", "grid-aligned-value-nodes-to-year-columns-and-group-rows");
+    groups.forEach((group, groupIndex) => {
+        const color = getColor(group);
+        const points = xValues
+            .map(x => {
+                const datum = byGroupYear.get(`${group}__${xKey(x)}`);
+                if (!datum) return null;
+                const value = Number(datum[yField]);
+                return {
+                    xRaw: x,
+                    x: xScale(xKey(x)),
+                    y: yScale(group),
+                    value,
+                    group,
+                    datum
+                };
+            })
+            .filter(Boolean);
+        if (!points.length) return;
+        markLayer.append("path")
+            .datum(points)
+            .attr("class", `bump02-line bump02-line-${makeClassSafe(group)}`)
+            .attr("data-group", group)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 3.4)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("opacity", 0.88)
+            .attr("d", d3.line()
+                .x(d => d.x)
+                .y(d => d.y)
+                .curve(d3.curveMonotoneX));
+        points.forEach((point, pointIndex) => {
+            const base = sizeScale(point.value);
+            const isFinal = pointIndex === points.length - 1;
+            const size = Math.min(58, base + (isFinal ? 10 : 0));
+            const fill = d3.color(color);
+            const nodeFill = isFinal && fill ? fill.darker(0.45).formatHex() : color;
+            markLayer.append("rect")
+                .attr("class", `bump02-node bump02-node-${makeClassSafe(group)}`)
+                .attr("data-group", group)
+                .attr("data-year", yearLabel(point.xRaw))
+                .attr("data-value", point.value)
+                .attr("data-role", "value-node")
+                .attr("x", point.x - size / 2)
+                .attr("y", point.y - size / 2)
+                .attr("width", size)
+                .attr("height", size)
+                .attr("rx", Math.max(7, size * 0.18))
+                .attr("fill", nodeFill)
+                .attr("stroke", "#FFFFFF")
+                .attr("stroke-width", 3.2)
+                .attr("filter", "url(#bump02-node-shadow)");
+            markLayer.append("text")
+                .attr("class", `bump02-node-label bump02-node-label-${makeClassSafe(group)}`)
+                .attr("x", point.x)
+                .attr("y", point.y + 1)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("font-family", "Arial, Helvetica, sans-serif")
+                .attr("font-size", Math.max(11, Math.min(20, size * 0.37)))
+                .attr("font-weight", 900)
+                .attr("fill", luminance(nodeFill) > 0.62 ? "#0A1736" : "#FFFFFF")
+                .text(valueLabel(point.value));
+        });
+    });
+
+    svg.append("g")
+        .attr("class", "reserved-asset-slot bump02-bottom-icon-slot")
+        .attr("data-asset-slot", "bottom-summary-icon")
+        .attr("data-reserved-slot", "bottom_summary_icon")
+        .attr("data-asset-source-policy", "image2_asset_optional")
+        .attr("data-anchor", "bottom-safe-area-below-chart-rows")
+        .attr("data-bbox", `${width * 0.45},${height - 38},${width * 0.10},22`)
+        .attr("data-collision-rule", "omit if it would overlap chart rows, labels, or canvas edge; no prose wrapper")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .append("rect")
+        .attr("x", width * 0.45)
+        .attr("y", height - 38)
+        .attr("width", width * 0.10)
+        .attr("height", 22)
+        .attr("rx", 11)
+        .attr("fill", "none")
+        .attr("stroke", "#9DD6E7")
+        .attr("stroke-dasharray", "4 5")
+        .attr("opacity", 0.01);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type24_bump_chart/bump_plain_chart_03.js

@@ -0,0 +1,434 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Sorted Lines Chart",
+    "chart_name": "bump_plain_chart_03",
+    "is_composite": false,
+    "chart_for": "comparison",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [
+        [2, 12],
+        [0, "inf"],
+        [4, 10]
+    ],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 排序线图(Bump Chart)实现 - 使用D3.js
+function makeChart(containerSelector, data) {
+    // ---------- 1. 数据准备阶段 ----------
+
+    // 提取数据和配置
+    const jsonData = data;                          // 完整的JSON数据对象
+    const chartData = jsonData.data.data;           // 实际数据点数组
+    const variables = jsonData.variables || {};     // 图表配置
+    const typography = jsonData.typography || {     // 字体设置，如果不存在则使用默认值
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "bold" }
+    };
+    const colors = jsonData.colors || { text_color: "#333333" };  // 颜色设置
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+
+    // 清空容器
+    d3.select(containerSelector).html("");
+
+    // ---------- 辅助函数：动态调整字体大小 ----------
+    function getAdaptedFontSize(text, maxWidth, initialFontSize, fontFamily, fontWeight) {
+        let fontSize = initialFontSize;
+        const tempSvgForFont = d3.select(containerSelector)
+            .append("svg")
+            .attr("width", 0)
+            .attr("height", 0)
+            .style("position", "absolute") // 防止影响布局
+            .style("visibility", "hidden");
+
+        while (fontSize > 1) { // 最小字体大小为1px
+            const textWidth = chartUtils.text.measure(tempSvgForFont, text, {
+                fontFamily,
+                fontSize,
+                fontWeight
+            }).width;
+            if (textWidth <= maxWidth) {
+                break;
+            }
+            fontSize -= 1;
+        }
+        tempSvgForFont.remove();
+        return fontSize;
+    }
+
+    // ---------- 辅助函数：创建正六边形路径（横边朝上） ----------
+    function hexagonPath(cx, cy, r) {
+        const angles = d3.range(6).map(i => (i * Math.PI / 3) + (Math.PI / 6)); // 六边形的6个角，旋转30度(π/6)使横边朝上
+        const points = angles.map(angle => [
+            cx + r * Math.sin(angle),
+            cy - r * Math.cos(angle)
+        ]);
+        return d3.line()(points) + "Z"; // Z表示闭合路径
+    }
+
+    // ---------- 辅助函数：获取文本度量 ----------
+    function getTextMetrics(text, fontSize, fontFamily, fontWeight) {
+        return chartUtils.text.measure(null, text, { fontFamily, fontSize, fontWeight });
+    }
+
+    // ---------- 辅助函数：判断颜色是否为浅色 ----------
+    function isColorLight(hexColor) {
+        return chartUtils.color.brightness(hexColor, { fallback: "#000000" }) > (160 / 255);
+    }
+
+    // ---------- 2. 尺寸和布局设置 ----------
+
+    // The selected reference uses a portrait infographic wrapper. This inner
+    // chart owns the year ribbon, row bands, reserved row asset slots, and marks.
+    const width = variables.width || 800;
+    const height = Math.max(620, variables.height || 620);
+
+    const palette = [
+        "#238A2A",
+        "#F58215",
+        "#EF3E44",
+        "#119BA5",
+        "#2F7DD1",
+        "#8E44AD",
+        "#9A6A10",
+        "#64748B",
+        "#B45309",
+        "#0F766E"
+    ];
+
+    // ---------- 3. 提取字段名和单位 ----------
+
+    // 根据数据列顺序提取字段名
+    const timeField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+
+    // 注意：此图表模板不使用字段单位
+
+    // ---------- 4. 数据处理 ----------
+
+    // 获取唯一时间点和分组值。Year/month/date-like fields must stay chronological.
+    const timePoints = [...new Set(chartData.map(d => d[timeField]))]
+        .sort((a, b) => chartUtils.format.parseDate(a) - chartUtils.format.parseDate(b));
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+
+    // Sparse panels are valid: render each group's available points.
+
+    function safeId(value) {
+        return String(value).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "group";
+    }
+
+    function displayTime(value) {
+        if (value instanceof Date) return String(value.getFullYear());
+        const raw = String(value);
+        const yearMatch = raw.match(/\b(19|20)\d{2}\b/);
+        return yearMatch ? yearMatch[0] : raw;
+    }
+
+    function formatNodeValue(value) {
+        const numeric = +value;
+        if (!Number.isFinite(numeric)) return "";
+        if (Math.abs(numeric) >= 10) return String(Math.round(numeric));
+        return chartUtils.format.compactFixedText(numeric);
+    }
+
+    function seriesColor(group, index) {
+        return palette[index % palette.length];
+    }
+
+    // ---------- 5. 创建SVG容器 ----------
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const chartBg = svg.append("defs");
+    const bgGradient = chartBg.append("linearGradient")
+        .attr("id", "bump03-chart-bg")
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#F4FBFF");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#F4FBFF");
+
+    svg.append("rect")
+        .attr("class", "bump03-body-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#bump03-chart-bg)");
+
+    const ribbonX = 28;
+    const ribbonY = 16;
+    const ribbonW = width - 56;
+    const ribbonH = 42;
+    const labelColumnW = Math.max(132, Math.min(180, width * 0.19));
+    const plotX = labelColumnW + 36;
+    const plotRight = width - 42;
+    const plotW = Math.max(220, plotRight - plotX);
+    const plotTop = ribbonY + ribbonH + 34;
+    const plotBottom = height - 34;
+    const plotH = Math.max(220, plotBottom - plotTop);
+    const rowH = plotH / Math.max(1, groups.length);
+    const badgeR = Math.max(14, Math.min(38, rowH * 0.25));
+    const badgeX = Math.max(44, plotX - 106);
+    const labelFont = Math.max(11, Math.min(22, rowH * 0.17));
+    const valueFont = Math.max(10, Math.min(17, rowH * 0.14));
+    const nodeR = Math.max(4.5, Math.min(7, rowH * 0.055));
+    const endNodeR = nodeR + 3.2;
+    const xScale = d3.scalePoint()
+        .domain(timePoints)
+        .range([plotX, plotRight])
+        .padding(0.03);
+    const xStep = timePoints.length > 1 ? Math.abs(xScale(timePoints[1]) - xScale(timePoints[0])) : plotW;
+    const latestTime = timePoints[timePoints.length - 1];
+
+    svg.append("rect")
+        .attr("class", "bump03-final-year-highlight")
+        .attr("data-anchor", "last-chronological-time-point")
+        .attr("x", xScale(latestTime) - xStep * 0.42)
+        .attr("y", plotTop)
+        .attr("width", Math.max(22, xStep * 0.72))
+        .attr("height", plotH)
+        .attr("fill", "#DDF4F0")
+        .attr("opacity", 0.58);
+
+    const ribbon = svg.append("g")
+        .attr("class", "bump03-year-ribbon")
+        .attr("data-coordinate-relationship", "grid-aligned-to-temporal-columns");
+
+    ribbon.append("rect")
+        .attr("x", ribbonX)
+        .attr("y", ribbonY)
+        .attr("width", ribbonW)
+        .attr("height", ribbonH)
+        .attr("rx", 13)
+        .attr("fill", "#08345D");
+
+    ribbon.append("text")
+        .attr("x", ribbonX + 54)
+        .attr("y", ribbonY + ribbonH / 2)
+        .attr("dy", "0.35em")
+        .attr("text-anchor", "middle")
+        .style("font-family", "Arial, Helvetica, sans-serif")
+        .style("font-size", "16px")
+        .style("font-weight", "800")
+        .style("letter-spacing", "0")
+        .style("fill", "#FFFFFF")
+        .text("YEAR");
+
+    timePoints.forEach(timePoint => {
+        const x = xScale(timePoint);
+        ribbon.append("line")
+            .attr("x1", x - xStep / 2)
+            .attr("x2", x - xStep / 2)
+            .attr("y1", ribbonY + 9)
+            .attr("y2", ribbonY + ribbonH - 9)
+            .attr("stroke", "#2C5578")
+            .attr("stroke-width", 1)
+            .attr("opacity", 0.55);
+        ribbon.append("text")
+            .attr("x", x)
+            .attr("y", ribbonY + ribbonH / 2)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", "15px")
+            .style("font-weight", "800")
+            .style("letter-spacing", "0")
+            .style("fill", "#FFFFFF")
+            .text(displayTime(timePoint));
+    });
+
+    const plotLayer = svg.append("g")
+        .attr("class", "bump03-plot-layer")
+        .attr("data-chart-role", "chronological-bump-lines");
+
+    timePoints.forEach(timePoint => {
+        const x = xScale(timePoint);
+        plotLayer.append("line")
+            .attr("class", "bump03-year-guide")
+            .attr("data-time", displayTime(timePoint))
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", plotTop)
+            .attr("y2", plotBottom)
+            .attr("stroke", "#BFD3DF")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3 5")
+            .attr("opacity", 0.82);
+    });
+
+    groups.forEach((group, groupIndex) => {
+        const rowTop = plotTop + groupIndex * rowH;
+        const rowCenter = rowTop + rowH / 2;
+        const rowBottom = rowTop + rowH;
+        const color = seriesColor(group, groupIndex);
+        const slotId = safeId(group);
+        const groupData = chartData.filter(d => d[groupField] === group)
+            .sort((a, b) => timePoints.indexOf(a[timeField]) - timePoints.indexOf(b[timeField]));
+        const values = groupData.map(d => +d[valueField]).filter(Number.isFinite);
+        const minValue = d3.min(values);
+        const maxValue = d3.max(values);
+        const amplitude = Math.max(12, Math.min(rowH * 0.34, 44));
+        const valueScale = d3.scaleLinear()
+            .domain(minValue === maxValue ? [minValue - 1, maxValue + 1] : [minValue, maxValue])
+            .range([rowCenter + amplitude / 2, rowCenter - amplitude / 2]);
+
+        if (groupIndex > 0) {
+            plotLayer.append("line")
+                .attr("class", "bump03-row-divider")
+                .attr("x1", ribbonX)
+                .attr("x2", plotRight)
+                .attr("y1", rowTop)
+                .attr("y2", rowTop)
+                .attr("stroke", "#B8D0DD")
+                .attr("stroke-width", 1);
+        }
+
+        const badge = plotLayer.append("g")
+            .attr("class", "reserved-asset-slot bump03-row-badge-slot")
+            .attr("data-asset-slot", "row-badge")
+            .attr("data-reserved-slot", `row-badge-${slotId}`)
+            .attr("data-asset-source-policy", "image2_asset")
+            .attr("data-anchor", "group-row-centerline")
+            .attr("data-group", group)
+            .attr("data-bbox", `${(badgeX - badgeR).toFixed(1)},${(rowCenter - badgeR).toFixed(1)},${(badgeR * 2).toFixed(1)},${(badgeR * 2).toFixed(1)}`)
+            .attr("data-collision-rule", "avoid group label, year ribbon, line marks, values, and row dividers")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+
+        badge.append("circle")
+            .attr("cx", badgeX)
+            .attr("cy", rowCenter)
+            .attr("r", badgeR)
+            .attr("fill", chartUtils.color.variant(color, { mode: "brighter", amount: 1.6 }))
+            .attr("fill-opacity", 0.28)
+            .attr("stroke", color)
+            .attr("stroke-width", 1.6);
+        badge.append("circle")
+            .attr("cx", badgeX)
+            .attr("cy", rowCenter)
+            .attr("r", Math.max(4, badgeR * 0.16))
+            .attr("fill", color)
+            .attr("opacity", 0.52);
+        badge.append("text")
+            .attr("x", badgeX)
+            .attr("y", rowCenter + Math.max(3, badgeR * 0.12))
+            .attr("text-anchor", "middle")
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", Math.max(9, badgeR * 0.42) + "px")
+            .style("font-weight", "800")
+            .style("fill", color)
+            .text(String(group).slice(0, 2).toUpperCase());
+
+        const labelY = rowH >= 82 ? rowCenter + badgeR + labelFont * 0.95 : rowCenter + labelFont * 0.36;
+        plotLayer.append("text")
+            .attr("class", "bump03-group-label")
+            .attr("data-group", group)
+            .attr("x", rowH >= 82 ? badgeX : badgeX + badgeR + 10)
+            .attr("y", labelY)
+            .attr("text-anchor", rowH >= 82 ? "middle" : "start")
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", labelFont + "px")
+            .style("font-weight", "800")
+            .style("letter-spacing", "0")
+            .style("fill", "#082344")
+            .text(group);
+
+        const lineGenerator = d3.line()
+            .defined(d => Number.isFinite(+d[valueField]) && xScale(d[timeField]) != null)
+            .x(d => xScale(d[timeField]))
+            .y(d => valueScale(+d[valueField]));
+
+        if (groupData.length >= 2) {
+            plotLayer.append("path")
+                .datum(groupData)
+                .attr("class", "bump03-series-line")
+                .attr("data-series", group)
+                .attr("fill", "none")
+                .attr("stroke", color)
+                .attr("stroke-width", 4.2)
+                .attr("stroke-linecap", "round")
+                .attr("stroke-linejoin", "round")
+                .attr("opacity", 0.98)
+                .attr("d", lineGenerator);
+        }
+
+        groupData.forEach(d => {
+            const value = +d[valueField];
+            if (!Number.isFinite(value) || xScale(d[timeField]) == null) return;
+            const cx = xScale(d[timeField]);
+            const cy = valueScale(value);
+            const isLatest = d[timeField] === latestTime;
+            const r = isLatest ? endNodeR : nodeR;
+            const labelYClamped = Math.max(rowTop + valueFont + 4, cy - r - 8);
+
+            plotLayer.append("circle")
+                .attr("class", "bump03-node")
+                .attr("data-series", group)
+                .attr("data-time", displayTime(d[timeField]))
+                .attr("data-value", value)
+                .attr("cx", cx)
+                .attr("cy", cy)
+                .attr("r", r)
+                .attr("fill", "#F8FDFF")
+                .attr("stroke", color)
+                .attr("stroke-width", isLatest ? 4.2 : 3)
+                .attr("opacity", 1);
+
+            plotLayer.append("text")
+                .attr("class", "bump03-node-value")
+                .attr("data-series", group)
+                .attr("data-time", displayTime(d[timeField]))
+                .attr("x", cx)
+                .attr("y", labelYClamped)
+                .attr("text-anchor", "middle")
+                .style("font-family", "Arial, Helvetica, sans-serif")
+                .style("font-size", (isLatest ? valueFont + 2 : valueFont) + "px")
+                .style("font-weight", "800")
+                .style("letter-spacing", "0")
+                .style("fill", color)
+                .text(formatNodeValue(value));
+        });
+
+        if (groupIndex === groups.length - 1) {
+            plotLayer.append("line")
+                .attr("class", "bump03-row-divider")
+                .attr("x1", ribbonX)
+                .attr("x2", plotRight)
+                .attr("y1", rowBottom)
+                .attr("y2", rowBottom)
+                .attr("stroke", "#B8D0DD")
+                .attr("stroke-width", 1);
+        }
+    });
+
+    // 返回SVG节点
+    return svg.node();
+}