Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type22_dumbbell_plot/dumbbell_plot_plain_chart_01.js

@@ -0,0 +1,428 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Dumbbell Plot",
+    "chart_name": "dumbbell_plot_plain_chart_01",
+    "chart_for": "comparison",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 20], [0, "inf"], [2, 2]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 使用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: "normal" }
+    };
+    const colors = jsonData.colors || { text_color: "#333333" };  // 颜色设置
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };   // 图像设置
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+    // 设置视觉效果变量的默认值
+    variables.has_rounded_corners = variables.has_rounded_corners || false;
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_gradient = variables.has_gradient || false;
+    variables.has_stroke = variables.has_stroke || false;
+    variables.has_spacing = variables.has_spacing || false;
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    
+    // 设置边距
+    const margin = {
+        top: 90,      // 顶部空间用于标题
+        right: 20,    // 右侧边距用于值标签
+        bottom: 60,   // 底部边距
+        left: 100     // 左侧用于维度标签
+    };
+    
+    // ---------- 3. 提取字段名称和单位 ----------
+    
+    // 根据数据列顺序提取字段名称
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; 
+    let groupUnit = "";
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+    
+    //if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+    //    valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    //}
+    if (chartUtils.schema.channel(jsonData, "group").unit !== "none") {
+        groupUnit = chartUtils.schema.channel(jsonData, "group").unit; 
+    }
+    
+    // 数值格式化函数
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 获取唯一的维度值和组值
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 如有需要可以对维度进行排序 - 当前使用原始顺序
+    
+    // ---------- 5. 计算标签宽度 ----------
+    
+    // 创建临时SVG以测量文本宽度
+    const tempSvg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", 0)
+        .attr("height", 0)
+        .style("visibility", "hidden");
+    
+    // 初始填充值（将根据条形高度进行调整）
+    const flagPadding = 5;
+    
+    // 计算最大维度标签宽度
+    let maxLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        // 格式化维度名称（如果存在单位则添加）
+        const formattedDimension = dimensionUnit ? 
+            `${dimension}${dimensionUnit}` : 
+            `${dimension}`;
+            
+        const textWidth = chartUtils.text.measure(tempSvg, formattedDimension, {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: typography.label.font_weight
+        }).width;
+        const totalWidth = textWidth;
+        
+        maxLabelWidth = Math.max(maxLabelWidth, totalWidth);
+    });
+    
+    // 计算值标签的最大宽度
+    let maxValueWidth = 0;
+    chartData.forEach(d => {
+        const formattedValue = valueUnit ? 
+            `${d[valueField]}${valueUnit}` : 
+            `${chartUtils.format.autoText(+d[valueField])}`;
+            
+        const textWidth = chartUtils.text.measure(tempSvg, formattedValue, {
+            fontFamily: typography.annotation.font_family,
+            fontSize: typography.annotation.font_size,
+            fontWeight: typography.annotation.font_weight
+        }).width;
+        
+        maxValueWidth = Math.max(maxValueWidth, textWidth);
+    });
+    // 删除临时SVG
+    tempSvg.remove();
+    
+    // 根据标签宽度调整左边距（添加一些边距）
+    margin.left = Math.max(margin.left, maxLabelWidth + 10);
+    margin.right = Math.max(margin.right, maxValueWidth + 10);
+    
+    // 计算内部绘图区域大小
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // ---------- 6. 创建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");
+
+    // 首先创建defs元素（必须在使用前创建）
+    const defs = svg.append("defs");
+
+    // 创建背景渐变
+    const bgGradient = defs.append("linearGradient")
+    .attr("id", "background-gradient")
+    .attr("x1", "0%")
+    .attr("y1", "0%")
+    .attr("x2", "100%")
+    .attr("y2", "100%");
+
+    bgGradient.append("stop")
+    .attr("offset", "0%")
+    .attr("stop-color", "#4a0032");
+
+    bgGradient.append("stop")
+    .attr("offset", "100%")
+    .attr("stop-color", "#1c3b6e");
+
+    // 添加渐变背景（在所有其他元素之前）
+    svg.append("rect")
+    .attr("width", width)
+    .attr("height", height)
+    .attr("class", "background")
+    .attr("fill", "url(#background-gradient)")
+    .attr("opacity", 1.0);
+
+    // 添加阴影滤镜（如果启用）
+    if (variables.has_shadow) {
+        const filter = defs.append("filter")
+            .attr("id", "shadow")
+            .attr("filterUnits", "userSpaceOnUse")
+            .attr("width", "200%")
+            .attr("height", "200%");
+        
+        filter.append("feGaussianBlur")
+            .attr("in", "SourceAlpha")
+            .attr("stdDeviation", 3);
+        
+        filter.append("feOffset")
+            .attr("dx", 2)
+            .attr("dy", 2)
+            .attr("result", "offsetblur");
+        
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+    
+    // ---------- 7. 创建坐标轴比例尺 ----------
+    
+    // 计算额外的条形间距（如果启用）
+    const barPadding = variables.has_spacing ? 0.3 : 0.2;
+
+    // Y轴比例尺（用于维度） - 使用原始顺序
+    const yScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerHeight])
+        .padding(barPadding);
+
+    // X轴比例尺（用于值）
+    // 找到最小和最大值来设置范围
+    const minValue = d3.min(chartData, d => +d[valueField]);
+    const maxValue = d3.max(chartData, d => +d[valueField]);
+
+    // 修改X轴范围确保最小值和最大值都在刻度范围内
+    // 这里使用更大的倍数以确保有足够的空间
+    const xScale = d3.scaleLinear()
+        .domain([Math.min(minValue, 0) * 1.15, maxValue + 5])
+        .range([0, innerWidth]);
+   
+    
+    // 颜色比例尺（用于组）
+    const colorScale = colorResolver.scale(groups, { colors: ["#1d3c6f", "#6fa0d8"] });
+    chartUtils.legend.centered(svg, groups, {
+        colorScale,
+        colorResolver,
+        colors,
+    }, width / 2, margin.top - 25, {
+        markerShape: "circle",
+        markerSize: 15.0,
+        labelGap: 5,
+        itemGap: 10,
+        maxWidth: width - 10,
+        fitToWidth: true,
+        minFontSize: 8,
+        fontSize: typography.label.font_size,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: "#ffffff",
+    });
+    // ---------- 9. 创建主图表组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    
+    
+    // ---------- 10. 添加网格线（Y轴） ----------
+    
+    // 添加垂直网格线（刻度标记）
+    const xTicks = xScale.ticks(10);
+    
+    // 添加网格线
+    g.selectAll(".grid-line")
+        .data(xTicks)
+        .enter()
+        .append("line")
+        .attr("class", "grid-line")
+        .attr("x1", d => xScale(d))
+        .attr("y1", 0)
+        .attr("x2", d => xScale(d))
+        .attr("y2", innerHeight)
+        .attr("stroke", "rgba(255, 255, 255, 0.15)")
+        .attr("stroke-width", 1);
+    
+    // 在底部添加X轴值
+    g.selectAll(".x-tick-label")
+        .data(xTicks)
+        .enter()
+        .append("text")
+        .attr("class", "x-tick-label")
+        .attr("x", d => xScale(d))
+        .attr("y", innerHeight + 20)
+        .attr("text-anchor", "middle")
+        .style("font-family", "Arial")
+        .style("font-size", "12px")
+        .style("fill", "white")
+        .text(d => chartUtils.format.autoText(d));
+    
+    // ---------- 11. 添加交替行背景 ----------
+    
+    if (jsonData.variation && jsonData.variation.background === "styled") {
+        dimensions.forEach((dimension, i) => {
+            
+            g.append("rect")
+                .attr("x", -margin.left + 10)
+                .attr("y", yScale(dimension))
+                .attr("width", innerWidth + margin.left + margin.right - 20)
+                .attr("height", yScale.bandwidth())
+                .attr("class", "background")
+                .attr("fill", "rgba(255, 255, 255, 0.05)")
+                .attr("rx", 4)
+                .attr("ry", 4);
+        
+        });
+    }
+    
+    // ---------- 12. 绘制条形和标记 ----------
+    const barHeight = yScale.bandwidth();
+    // 找到最右侧的刻度位置，用于连接线终点
+    const rightmostTickX = xScale(xTicks[xTicks.length - 1]);
+    
+    dimensions.forEach(dimension => {
+        // 获取此维度的所有数据点
+        const dimensionData = chartData.filter(d => d[dimensionField] === dimension);
+        
+        if (dimensionData.length > 0) {
+            const barHeight = yScale.bandwidth();
+            const labelY = yScale(dimension) + barHeight / 2;
+            
+            // 添加维度标签
+            g.append("text")
+                .attr("x", -5)
+                .attr("y", labelY)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", typography.label.font_size)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", "#ffffff")
+                .text(dimension);
+            
+            // 两个组的数据
+            const pointData = groups.map(group => {
+                const dataPoint = dimensionData.find(d => d[groupField] === group);
+                if (dataPoint) {
+                    return {
+                        group: group,
+                        value: +dataPoint[valueField],
+                        x: xScale(+dataPoint[valueField]),
+                        y: yScale(dimension) + barHeight / 2
+                    };
+                }
+                return null;
+            }).filter(d => d !== null);
+            
+            // 绘制连接线（从最低值数据点到右边缘）
+            if (pointData.length > 0) {
+                // 找到具有最低值的数据点
+                const lowestValueData = pointData.reduce((lowest, current) => 
+                    current.value < lowest.value ? current : lowest, pointData[0]);
+                
+                if (lowestValueData) {
+                    // 绘制连接线 - 更粗并精确到最右侧刻度线
+                    g.append("rect")
+                        .attr("x", lowestValueData.x)
+                        .attr("y", lowestValueData.y - 2) // 更粗的线
+                        .attr("width", rightmostTickX - lowestValueData.x)
+                        .attr("height", 4) // 更粗的线
+                        .attr("fill", "#ffffff");
+                }
+            }
+            
+            // 添加每个数据点的标记（圆圈）
+            pointData.forEach((point, i) => {
+                // 绘制标记圆圈
+                g.append("circle")
+                    .attr("cx", point.x)
+                    .attr("cy", point.y)
+                    .attr("r", 8)
+                    .attr("fill", colorScale(point.group))
+                    .attr("stroke", "white")
+                    .attr("stroke-width", 2);
+                
+                // 添加值标签 - 修改这里保留小数点和小数部分
+                const formattedValue = valueUnit ? 
+                    `${chartUtils.format.autoText(point.value)}${valueUnit}` : 
+                    `${chartUtils.format.autoText(point.value)}`;
+                
+                const labelFontSize = Math.min(20, Math.max(barHeight * 0.6, parseFloat(typography.annotation.font_size)));
+                const textBBox = chartUtils.text.measure(svg, formattedValue, {
+                    fontFamily: typography.annotation.font_family,
+                    fontSize: labelFontSize,
+                    fontWeight: "bold",
+                });
+                const textPadding = 8; // 文本两侧的小填充
+                const labelWidth = textBBox.width + textPadding * 2;
+                const labelHeight = textBBox.height + textPadding;
+                
+                // 创建样式化值标签 - 移到圆圈右侧
+                g.append("rect")
+                    .attr("x", point.x + 12) // 从圆圈右侧开始
+                    .attr("y", point.y - labelHeight/2) // 垂直居中
+                    .attr("width", labelWidth)
+                    .attr("height", labelHeight)
+                    .attr("rx", 6)
+                    .attr("ry", 6)
+                    .attr("fill", colorScale(point.group))
+                    .attr("stroke", "white")
+                    .attr("stroke-width", 1);
+                
+                // 修改文本位置
+                g.append("text")
+                    .attr("x", point.x + 12 + labelWidth/2) // 文本在矩形中央
+                    .attr("y", point.y)
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", "middle")
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", `${Math.min(20,Math.max(barHeight * 0.6, parseFloat(typography.annotation.font_size)))}px`)
+                    .style("font-weight", "bold")
+                    .style("fill", "white")
+                    .text(formattedValue);
+            });
+        }
+    });
+    
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type22_dumbbell_plot/dumbbell_plot_plain_chart_02.js

@@ -0,0 +1,421 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Dumbbell Plot",
+    "chart_name": "dumbbell_plot_plain_chart_02",
+    "chart_for": "comparison",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 12], [0, "inf"], [2,2]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 使用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: "normal" }
+    };
+    const colors = jsonData.colors || { text_color: "#333333" };  // 颜色设置
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };   // 图像设置
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+    // 设置视觉效果变量的默认值
+    variables.has_rounded_corners = variables.has_rounded_corners || false;
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_gradient = variables.has_gradient || false;
+    variables.has_stroke = variables.has_stroke || false;
+    variables.has_spacing = variables.has_spacing || false;
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    
+    // 设置边距
+    const margin = {
+        top: 90,      // 顶部空间用于标题
+        right: 100,   // 右侧边距用于值标签
+        bottom: 60,   // 底部边距
+        left: 20      // 左侧用于维度标签
+    };
+    
+    // ---------- 3. 提取字段名称和单位 ----------
+    
+    // 根据数据列顺序提取字段名称
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; 
+    let groupUnit = "";
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+    
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+    if (chartUtils.schema.channel(jsonData, "group").unit !== "none") {
+        groupUnit = chartUtils.schema.channel(jsonData, "group").unit; 
+    }
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 获取唯一的维度值和组值
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 如有需要可以对维度进行排序 - 当前使用原始顺序
+    
+    // ---------- 5. 计算标签宽度 ----------
+    
+    // 创建临时SVG以测量文本宽度
+    const tempSvg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", 0)
+        .attr("height", 0)
+        .style("visibility", "hidden");
+    
+    // 初始填充值（将根据条形高度进行调整）
+    const flagPadding = 5;
+    
+    // 计算最大维度标签宽度
+    let maxLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        // 格式化维度名称（如果存在单位则添加）
+        const formattedDimension = dimensionUnit ? 
+            `${dimension}${dimensionUnit}` : 
+            `${dimension}`;
+            
+        const textWidth = chartUtils.text.measure(tempSvg, formattedDimension, {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: typography.label.font_weight
+        }).width;
+        const totalWidth = textWidth;
+        
+        maxLabelWidth = Math.max(maxLabelWidth, totalWidth);
+    });
+    
+    // 计算值标签的最大宽度
+    let maxValueWidth = 0;
+    chartData.forEach(d => {
+        const formattedValue = valueUnit ? 
+            `${d[valueField]}${valueUnit}` : 
+            `${chartUtils.format.autoText(+d[valueField])}`;
+            
+        const textWidth = chartUtils.text.measure(tempSvg, formattedValue, {
+            fontFamily: typography.annotation.font_family,
+            fontSize: typography.annotation.font_size,
+            fontWeight: typography.annotation.font_weight
+        }).width;
+        
+        maxValueWidth = Math.max(maxValueWidth, textWidth);
+    });
+    // 删除临时SVG
+    tempSvg.remove();
+    
+    // 根据标签宽度调整左边距（添加一些边距）
+    margin.left = Math.max(margin.left, maxLabelWidth + 10);
+    margin.right = Math.max(margin.right, maxValueWidth + 10);
+    
+    // 计算内部绘图区域大小
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // ---------- 6. 创建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");
+
+    // 首先创建defs元素（必须在使用前创建）
+    const defs = svg.append("defs");
+
+    // 创建背景渐变
+    const bgGradient = defs.append("linearGradient")
+    .attr("id", "background-gradient")
+    .attr("x1", "0%")
+    .attr("y1", "0%")
+    .attr("x2", "100%")
+    .attr("y2", "100%");
+
+    bgGradient.append("stop")
+    .attr("offset", "0%")
+    .attr("stop-color", "#4a0032");
+
+    bgGradient.append("stop")
+    .attr("offset", "100%")
+    .attr("stop-color", "#1c3b6e");
+
+    // 添加渐变背景（在所有其他元素之前）
+    svg.append("rect")
+    .attr("width", width)
+    .attr("height", height)
+    .attr("class", "background")
+    .attr("fill", "url(#background-gradient)")
+    .attr("opacity", 1.0);
+
+    // 添加阴影滤镜（如果启用）
+    if (variables.has_shadow) {
+        const filter = defs.append("filter")
+            .attr("id", "shadow")
+            .attr("filterUnits", "userSpaceOnUse")
+            .attr("width", "200%")
+            .attr("height", "200%");
+        
+        filter.append("feGaussianBlur")
+            .attr("in", "SourceAlpha")
+            .attr("stdDeviation", 3);
+        
+        filter.append("feOffset")
+            .attr("dx", 2)
+            .attr("dy", 2)
+            .attr("result", "offsetblur");
+        
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+    
+    // ---------- 7. 创建坐标轴比例尺 ----------
+    
+    // 计算额外的条形间距（如果启用）
+    const barPadding = variables.has_spacing ? 0.3 : 0.2;
+
+    // X轴比例尺（用于维度） - 使用原始顺序
+    const xScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerWidth])
+        .padding(barPadding);
+
+    // Y轴比例尺（用于值）
+    // 找到最小和最大值来设置范围
+    const minValue = d3.min(chartData, d => +d[valueField]);
+    const maxValue = d3.max(chartData, d => +d[valueField]);
+
+    // 修改Y轴范围确保最小值和最大值都在刻度范围内
+    const yScale = d3.scaleLinear()
+        .domain([Math.min(minValue, 0) * 1.15, maxValue + 5])
+        .range([innerHeight, 0]);
+   
+    
+    // 颜色比例尺（用于组）
+    const colorScale = colorResolver.scale(groups, { colors: ["#1d3c6f", "#6fa0d8"] });
+    chartUtils.legend.centered(svg, groups, {
+        colorScale,
+        colorResolver,
+        colors,
+    }, width / 2, margin.top - 25, {
+        markerShape: "circle",
+        markerSize: 15.0,
+        labelGap: 5,
+        itemGap: 10,
+        maxWidth: width - 10,
+        fitToWidth: true,
+        minFontSize: 8,
+        fontSize: typography.label.font_size,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: "#ffffff",
+    });
+    // ---------- 9. 创建主图表组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    
+    
+    // ---------- 10. 添加网格线（X轴） ----------
+    
+    // 添加水平网格线（刻度标记）
+    const yTicks = yScale.ticks(10);
+    
+    // 添加网格线
+    g.selectAll(".grid-line")
+        .data(yTicks)
+        .enter()
+        .append("line")
+        .attr("class", "grid-line")
+        .attr("x1", 0)
+        .attr("y1", d => yScale(d))
+        .attr("x2", innerWidth)
+        .attr("y2", d => yScale(d))
+        .attr("stroke", "rgba(255, 255, 255, 0.15)")
+        .attr("stroke-width", 1);
+    
+    // 在左侧添加Y轴值
+    g.selectAll(".y-tick-label")
+        .data(yTicks)
+        .enter()
+        .append("text")
+        .attr("class", "y-tick-label")
+        .attr("x", -10)
+        .attr("y", d => yScale(d))
+        .attr("text-anchor", "end")
+        .attr("dy", "0.35em")
+        .style("font-family", "Arial")
+        .style("font-size", "12px")
+        .style("fill", "white")
+        .text(d => d);
+    
+    // ---------- 11. 添加交替列背景 ----------
+    
+    if (jsonData.variation && jsonData.variation.background === "styled") {
+        dimensions.forEach((dimension, i) => {
+            g.append("rect")
+                .attr("x", xScale(dimension))
+                .attr("y", 0)
+                .attr("width", xScale.bandwidth())
+                .attr("height", innerHeight)
+                .attr("class", "background")
+                .attr("fill", "rgba(255, 255, 255, 0.05)")
+                .attr("rx", 4)
+                .attr("ry", 4);
+        });
+    }
+    
+    // ---------- 12. 绘制条形和标记 ----------
+    const barWidth = xScale.bandwidth();
+    // 找到最上方的刻度位置，用于连接线终点
+    const topmostTickY = yScale(yTicks[yTicks.length - 1]);
+    
+    dimensions.forEach(dimension => {
+        // 获取此维度的所有数据点
+        const dimensionData = chartData.filter(d => d[dimensionField] === dimension);
+        
+        if (dimensionData.length > 0) {
+            const barWidth = xScale.bandwidth();
+            const labelX = xScale(dimension) + barWidth / 2;
+            
+            // 添加维度标签
+            g.append("text")
+                .attr("x", labelX)
+                .attr("y", innerHeight + 20)
+                .attr("text-anchor", "middle")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", typography.label.font_size)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", "#ffffff")
+                .text(dimension);
+            
+            // 两个组的数据
+            const pointData = groups.map(group => {
+                const dataPoint = dimensionData.find(d => d[groupField] === group);
+                if (dataPoint) {
+                    return {
+                        group: group,
+                        value: +dataPoint[valueField],
+                        x: xScale(dimension) + barWidth / 2,
+                        y: yScale(+dataPoint[valueField])
+                    };
+                }
+                return null;
+            }).filter(d => d !== null);
+            
+            // 绘制连接线（从最低值数据点到顶部边缘）
+            if (pointData.length > 0) {
+                // 找到具有最低值的数据点
+                const lowestValueData = pointData.reduce((lowest, current) => 
+                    current.value < lowest.value ? current : lowest, pointData[0]);
+                
+                if (lowestValueData) {
+                    // 绘制连接线 - 更粗并精确到最上方刻度线
+                    g.append("rect")
+                        .attr("x", lowestValueData.x - 2) // 更粗的线
+                        .attr("y", topmostTickY)
+                        .attr("width", 4) // 更粗的线
+                        .attr("height", lowestValueData.y - topmostTickY)
+                        .attr("fill", "#ffffff");
+                }
+            }
+            
+            // 添加每个数据点的标记（圆圈）
+            pointData.forEach((point, i) => {
+                // 绘制标记圆圈
+                g.append("circle")
+                    .attr("cx", point.x)
+                    .attr("cy", point.y)
+                    .attr("r", 8)
+                    .attr("fill", colorScale(point.group))
+                    .attr("stroke", "white")
+                    .attr("stroke-width", 2);
+                
+                // 添加值标签
+                const formattedValue = chartUtils.format.fixed(point.value, 1, { unit: valueUnit }).text;
+                
+                const labelFontSize = Math.min(20, Math.max(barWidth * 0.6, parseFloat(typography.annotation.font_size)));
+                const textBBox = chartUtils.text.measure(svg, formattedValue, {
+                    fontFamily: typography.annotation.font_family,
+                    fontSize: labelFontSize,
+                    fontWeight: "bold",
+                });
+                const textPadding = 8; // 文本两侧的小填充
+                const labelWidth = textBBox.width + textPadding * 2;
+                const labelHeight = textBBox.height + textPadding;
+                
+                // 创建样式化值标签 - 移到圆圈上方
+                g.append("rect")
+                    .attr("x", point.x - labelWidth/2) // 水平居中
+                    .attr("y", point.y - labelHeight - 12) // 在圆圈上方
+                    .attr("width", labelWidth)
+                    .attr("height", labelHeight)
+                    .attr("rx", 6)
+                    .attr("ry", 6)
+                    .attr("fill", colorScale(point.group))
+                    .attr("stroke", "white")
+                    .attr("stroke-width", 1);
+                
+                // 修改文本位置
+                g.append("text")
+                    .attr("x", point.x) // 文本在矩形中央
+                    .attr("y", point.y - labelHeight/2 - 12)
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", "middle")
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", `${Math.min(20,Math.max(barWidth * 0.6, parseFloat(typography.annotation.font_size)))}px`)
+                    .style("font-weight", "bold")
+                    .style("fill", "white")
+                    .text(formattedValue);
+            });
+        }
+    });
+    
+    // 返回SVG节点
+    return svg.node();
+}