Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/treemap/treemap_01.js

@@ -0,0 +1,171 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Treemap",
+    "chart_name": "treemap_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备层次结构数据
+    // 将扁平数据转换为层次结构
+    const hierarchyData = {
+        name: "root",
+        children: []
+    };
+    
+    // 按类别分组数据
+    const groupedData = d3.group(chartData, d => d[categoryField]);
+    
+    // 将分组数据转换为层次结构
+    groupedData.forEach((values, category) => {
+        // 计算该类别的总值
+        const total = d3.sum(values, d => +d[valueField]);
+        
+        hierarchyData.children.push({
+            name: category,
+            value: total
+        });
+    });
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, hierarchyData.children.findIndex(item => item.name === d), { palette: "tableau10" }).value;
+    
+    // 计算树图布局
+    const root = d3.treemap()
+        .size([chartWidth, chartHeight])
+        .padding(3)
+        .round(true)
+        (d3.hierarchy(hierarchyData)
+            .sum(d => d.value)
+            .sort((a, b) => b.value - a.value));
+    
+    // 为每个叶子节点创建一个单元格
+    const leaf = g.selectAll("g")
+        .data(root.leaves())
+        .join("g")
+        .attr("transform", d => `translate(${d.x0},${d.y0})`);
+    
+    // 添加矩形
+    leaf.append("rect")
+        .attr("width", d => Math.max(0, d.x1 - d.x0))
+        .attr("height", d => Math.max(0, d.y1 - d.y0))
+        .attr("fill", d => {
+            // 获取类别名称
+            const category = d.data.name;
+            return colorScale(category);
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "#fff");
+    
+    // 为每个矩形添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    leaf.append("title")
+        .text(d => `${d.data.name}: ${format(d.value)}`);
+    
+    // 添加文本标签
+    leaf.append("text")
+        .attr("x", 4)
+        .attr("y", 14)
+        .attr("fill", "#fff")
+        .attr("font-size", "12px")
+        .attr("font-weight", "bold")
+        .text(d => d.data.name)
+        .each(function(d) {
+            // 检查文本是否适合矩形
+            const rectWidth = d.x1 - d.x0;
+            const maxTextWidth = rectWidth - 8;
+            const measureLabelWidth = value => chartUtils.text.measure(null, value, {
+                fontSize: 12,
+                fontWeight: "bold"
+            }).width;
+            
+            // 如果文本太长，截断它
+            const text = d3.select(this);
+            let textContent = text.text();
+            let displayText = textContent;
+            while (measureLabelWidth(displayText) > maxTextWidth && textContent.length > 0) {
+                textContent = textContent.slice(0, -1);
+                displayText = textContent + "...";
+                text.text(displayText);
+            }
+        });
+    
+    // 添加值标签
+    leaf.append("text")
+        .attr("x", 4)
+        .attr("y", 30)
+        .attr("fill", "#fff")
+        .attr("fill-opacity", 0.7)
+        .attr("font-size", "10px")
+        .text(d => format(d.value))
+        .each(function(d) {
+            // 检查文本是否适合矩形
+            const textWidth = chartUtils.text.measure(null, format(d.value), {
+                fontSize: 10
+            }).width;
+            const rectWidth = d.x1 - d.x0;
+            
+            if (textWidth > rectWidth - 8 || (d.y1 - d.y0) < 40) {
+                // 如果文本太长或矩形太小，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/treemap_01_dark.js

@@ -0,0 +1,174 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Treemap",
+    "chart_name": "treemap_01_dark",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors_dark || { 
+        text_color: "#000000", 
+        other: { primary: "#4682B4", secondary: "#FF7F50" } 
+    }; 
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备层次结构数据
+    // 将扁平数据转换为层次结构
+    const hierarchyData = {
+        name: "root",
+        children: []
+    };
+    
+    // 按类别分组数据
+    const groupedData = d3.group(chartData, d => d[categoryField]);
+    
+    // 将分组数据转换为层次结构
+    groupedData.forEach((values, category) => {
+        // 计算该类别的总值
+        const total = d3.sum(values, d => +d[valueField]);
+        
+        hierarchyData.children.push({
+            name: category,
+            value: total
+        });
+    });
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, hierarchyData.children.findIndex(item => item.name === d), { palette: "tableau10" }).value;
+    
+    // 计算树图布局
+    const root = d3.treemap()
+        .size([chartWidth, chartHeight])
+        .padding(3)
+        .round(true)
+        (d3.hierarchy(hierarchyData)
+            .sum(d => d.value)
+            .sort((a, b) => b.value - a.value));
+    
+    // 为每个叶子节点创建一个单元格
+    const leaf = g.selectAll("g")
+        .data(root.leaves())
+        .join("g")
+        .attr("transform", d => `translate(${d.x0},${d.y0})`);
+    
+    // 添加矩形
+    leaf.append("rect")
+        .attr("width", d => Math.max(0, d.x1 - d.x0))
+        .attr("height", d => Math.max(0, d.y1 - d.y0))
+        .attr("fill", d => {
+            // 获取类别名称
+            const category = d.data.name;
+            return colorScale(category);
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "#fff");
+    
+    // 为每个矩形添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    leaf.append("title")
+        .text(d => `${d.data.name}: ${format(d.value)}`);
+    
+    // 添加文本标签
+    leaf.append("text")
+        .attr("x", 4)
+        .attr("y", 14)
+        .attr("fill", "#fff")
+        .attr("font-size", "12px")
+        .attr("font-weight", "bold")
+        .text(d => d.data.name)
+        .each(function(d) {
+            // 检查文本是否适合矩形
+            const rectWidth = d.x1 - d.x0;
+            const maxTextWidth = rectWidth - 8;
+            const measureLabelWidth = value => chartUtils.text.measure(null, value, {
+                fontSize: 12,
+                fontWeight: "bold"
+            }).width;
+            
+            // 如果文本太长，截断它
+            const text = d3.select(this);
+            let textContent = text.text();
+            let displayText = textContent;
+            while (measureLabelWidth(displayText) > maxTextWidth && textContent.length > 0) {
+                textContent = textContent.slice(0, -1);
+                displayText = textContent + "...";
+                text.text(displayText);
+            }
+        });
+    
+    // 添加值标签
+    leaf.append("text")
+        .attr("x", 4)
+        .attr("y", 30)
+        .attr("fill", "#fff")
+        .attr("fill-opacity", 0.7)
+        .attr("font-size", "10px")
+        .text(d => format(d.value))
+        .each(function(d) {
+            // 检查文本是否适合矩形
+            const textWidth = chartUtils.text.measure(null, format(d.value), {
+                fontSize: 10
+            }).width;
+            const rectWidth = d.x1 - d.x0;
+            
+            if (textWidth > rectWidth - 8 || (d.y1 - d.y0) < 40) {
+                // 如果文本太长或矩形太小，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/treemap_02.js

@@ -0,0 +1,207 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Treemap",
+    "chart_name": "treemap_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "icon_mark": "overlay",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    // 获取单位
+    const valueUnit = chartUtils.schema.column(dataColumns, 1).unit;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备层次结构数据
+    // 将扁平数据转换为层次结构
+    const hierarchyData = {
+        name: "root",
+        children: []
+    };
+    
+    // 按类别分组数据
+    const groupedData = d3.group(chartData, d => d[categoryField]);
+    
+    // 将分组数据转换为层次结构
+    groupedData.forEach((values, category) => {
+        // 计算该类别的总值
+        const total = d3.sum(values, d => +d[valueField]);
+        
+        hierarchyData.children.push({
+            name: category,
+            value: total
+        });
+    });
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, hierarchyData.children.findIndex(item => item.name === d), { palette: "tableau10" }).value;
+    
+    // 计算树图布局
+    const root = d3.treemap()
+        .size([chartWidth, chartHeight])
+        .padding(8)
+        .round(true)
+        (d3.hierarchy(hierarchyData)
+            .sum(d => d.value)
+            .sort((a, b) => b.value - a.value));
+    
+    // 为每个叶子节点创建一个单元格
+    const leaf = g.selectAll("g")
+        .data(root.leaves())
+        .join("g")
+        .attr("transform", d => `translate(${d.x0},${d.y0})`);
+    
+    // 添加矩形
+    leaf.append("rect")
+        .attr("width", d => Math.max(0, d.x1 - d.x0))
+        .attr("height", d => Math.max(0, d.y1 - d.y0))
+        .attr("rx", 8)
+        .attr("ry", 8)
+        .attr("fill", d => {
+            // 获取类别名称
+            const category = d.data.name;
+            return colorScale(category);
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none");
+    
+    // 为每个矩形添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    leaf.append("title")
+        .text(d => `${d.data.name}: ${format(d.value)}`);
+    
+    // 创建包含标签和图标的组
+    const labelGroup = leaf.append("g")
+        .attr("transform", "translate(12, 12)"); // 增加边距
+    const measureCategoryLabelWidth = value => chartUtils.text.measure(null, value, {
+        fontSize: 20,
+        fontWeight: "bold"
+    }).width;
+    const measureValueLabelWidth = value => chartUtils.text.measure(null, value, {
+        fontSize: 16
+    }).width;
+    
+    // 添加类别标签 (x label) - 变大并放在左上角，使用白色
+    labelGroup.append("text")
+        .attr("class", "category-label")
+        .attr("x", 0)
+        .attr("y", 18)
+        .attr("fill", "#ffffff")
+        .attr("font-size", "20px") // 字体变得更大
+        .attr("font-weight", "bold") // 使用粗体
+        .text(d => d.data.name)
+        .each(function(d) {
+            // 检查文本是否适合矩形（考虑图标宽度）
+            const rectWidth = d.x1 - d.x0 - 48; // 减去图标宽度和更多间距
+            const maxTextWidth = rectWidth - 12;
+            
+            // 如果文本太长，截断它
+            const text = d3.select(this);
+            let textContent = text.text();
+            let displayText = textContent;
+            while (measureCategoryLabelWidth(displayText) > maxTextWidth && textContent.length > 0) {
+                textContent = textContent.slice(0, -1);
+                displayText = textContent + "...";
+                text.text(displayText);
+            }
+        });
+    
+    // 添加图标（在x label右侧）
+    labelGroup.each(function(d) {
+        const g = d3.select(this);
+        const categoryName = d.data.name;
+        
+        // 获取图标
+        if (images.field && images.field[categoryName]) {
+            const textWidth = measureCategoryLabelWidth(g.select(".category-label").text());
+            
+            // 添加白色填充的圆形背景
+            g.append("circle")
+                .attr("cx", textWidth + 30) // 放在文本右侧，向右移动10px
+                .attr("cy", 10) // 向下移动10px
+                .attr("r", 22) // 半径增加到22 (17+5)
+                .attr("fill", "#ffffff") // 纯白色填充
+                .attr("fill-opacity", 0.75) // 75%透明度
+                .attr("stroke", "none"); // 移除描边
+            
+            g.append("image")
+                .attr("x", textWidth + 14) // 放在文本右侧，向右移动10px
+                .attr("y", -6) // 调整y位置，向下移动10px
+                .attr("width", 32)
+                .attr("height", 32)
+                .attr("xlink:href", images.field[categoryName]);
+        }
+    });
+    
+    // 添加值标签 (data label) - 放在x label下方，使用黑色，添加单位
+    labelGroup.append("text")
+        .attr("x", 0)
+        .attr("y", 42) // 放在x label下方
+        .attr("fill", "#000000") // 使用黑色
+        .attr("font-size", "16px") // 字体变大
+        .text(d => `${format(d.value)}${valueUnit}`) // 添加单位
+        .each(function(d) {
+            // 检查文本是否适合矩形
+            const textWidth = measureValueLabelWidth(`${format(d.value)}${valueUnit}`);
+            const rectWidth = d.x1 - d.x0;
+            
+            if (textWidth > rectWidth - 24 || (d.y1 - d.y0) < 70) {
+                // 如果文本太长或矩形太小，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/treemap_03.js

@@ -0,0 +1,255 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Treemap",
+    "chart_name": "treemap_03",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "icon_mark": "overlay",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    // 获取单位
+    const valueUnit = chartUtils.schema.column(dataColumns, 1).unit;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备层次结构数据
+    // 将扁平数据转换为层次结构
+    const hierarchyData = {
+        name: "root",
+        children: []
+    };
+    
+    // 按类别分组数据
+    const groupedData = d3.group(chartData, d => d[categoryField]);
+    
+    // 将分组数据转换为层次结构
+    groupedData.forEach((values, category) => {
+        // 计算该类别的总值
+        const total = d3.sum(values, d => +d[valueField]);
+        
+        hierarchyData.children.push({
+            name: category,
+            value: total
+        });
+    });
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, hierarchyData.children.findIndex(item => item.name === d), { palette: "tableau10" }).value;
+
+    // 创建渐变定义
+    const defs = svg.append("defs");
+    
+    // 为每个类别创建一个金属光泽渐变
+    hierarchyData.children.forEach((category, i) => {
+        const baseColor = colorScale(category.name);
+        const gradientId = `metallic-gradient-${i}`;
+        
+        // 创建线性渐变
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%")
+            .attr("y2", "100%");
+        
+        // 金属光泽效果的渐变停止点
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", colorResolver.variant(baseColor, { mode: "brighter", amount: 1.5 }))
+            .attr("stop-opacity", 0.8);
+            
+        gradient.append("stop")
+            .attr("offset", "45%")
+            .attr("stop-color", baseColor)
+            .attr("stop-opacity", 0.9);
+            
+        gradient.append("stop")
+            .attr("offset", "55%")
+            .attr("stop-color", baseColor)
+            .attr("stop-opacity", 0.9);
+            
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", colorResolver.variant(baseColor, { mode: "darker", amount: 1.2 }))
+            .attr("stop-opacity", 0.8);
+    });
+    
+    // 计算树图布局
+    const root = d3.treemap()
+        .size([chartWidth, chartHeight])
+        .padding(5)
+        .round(true)
+        (d3.hierarchy(hierarchyData)
+            .sum(d => d.value)
+            .sort((a, b) => b.value - a.value));
+    
+    // 为每个叶子节点创建一个单元格
+    const leaf = g.selectAll("g")
+        .data(root.leaves())
+        .join("g")
+        .attr("transform", d => `translate(${d.x0},${d.y0})`);
+    
+    // 添加矩形
+    leaf.append("rect")
+        .attr("width", d => Math.max(0, d.x1 - d.x0))
+        .attr("height", d => Math.max(0, d.y1 - d.y0))
+        .attr("fill", d => {
+            // 获���类别名称
+            const category = d.data.name;
+            const index = hierarchyData.children.findIndex(item => item.name === category);
+            return `url(#metallic-gradient-${index})`;
+        })
+        .attr("stroke", "none");
+    
+    // 为每个矩形添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    leaf.append("title")
+        .text(d => `${d.data.name}: ${format(d.value)}`);
+    
+    // 创建包含标签和图标的组
+    const labelGroup = leaf.append("g")
+        .attr("transform", "translate(12, 12)"); // 增加边距
+    
+    // 添加类别标签 (x label) - 变大并放在左上角，使用白色
+    labelGroup.append("text")
+        .attr("class", "category-label")
+        .attr("x", 0)
+        .attr("y", 18)
+        .attr("fill", "#ffffff")
+        .attr("font-size", "20px") // 字体变得更大
+        .attr("font-weight", "bold") // 使用粗体
+        .text(d => d.data.name)
+        .each(function(d) {
+            // 检查文本是否适合矩形（考虑图标宽度）
+            const rectWidth = d.x1 - d.x0 - 48; // 减去图标宽度和更多间距
+            const maxTextWidth = rectWidth - 12;
+            const measureLabelWidth = value => chartUtils.text.measure(null, value, {
+                fontSize: 20,
+                fontWeight: "bold"
+            }).width;
+            
+            // 如果文本太长，截断它
+            const text = d3.select(this);
+            let textContent = text.text();
+            let displayText = textContent;
+            while (measureLabelWidth(displayText) > maxTextWidth && textContent.length > 0) {
+                textContent = textContent.slice(0, -1);
+                displayText = textContent + "...";
+                text.text(displayText);
+            }
+        });
+    
+    // 添加图标（在矩形中央）
+    leaf.each(function(d) {
+        const g = d3.select(this);
+        const categoryName = d.data.name;
+        const boxWidth = d.x1 - d.x0;
+        const boxHeight = d.y1 - d.y0;
+        
+        // 获取图标
+        if (images.field && images.field[categoryName]) {
+            const iconSize = 48; // 增大图标尺寸
+            
+            // 添加白色填充的圆形背景
+            g.append("circle")
+                .attr("cx", boxWidth / 2)
+                .attr("cy", boxHeight / 2)
+                .attr("r", iconSize / 2 + 5) // 半径为图标尺寸的一半加上边距
+                .attr("fill", "#ffffff")
+                .attr("fill-opacity", 0.75)
+                .attr("stroke", "none");
+            
+            g.append("image")
+                .attr("x", (boxWidth - iconSize) / 2)
+                .attr("y", (boxHeight - iconSize) / 2)
+                .attr("width", iconSize)
+                .attr("height", iconSize)
+                .attr("xlink:href", images.field[categoryName]);
+        }
+    });
+    
+    // 添加值标签 (data label) - 放在矩形下方
+    leaf.append("text")
+        .attr("x", d => (d.x1 - d.x0) / 2)
+        .attr("y", d => (d.y1 - d.y0) - 15) // 放在矩形底部上方15px位置
+        .attr("text-anchor", "middle")
+        .attr("fill", "#ffffff")
+        .each(function(d) {
+            const rectWidth = d.x1 - d.x0;
+            // 根据矩形宽度调整字体大小
+            let fontSize = 16;
+            if (rectWidth < 120) {
+                fontSize = 12;
+            } else if (rectWidth < 80) {
+                fontSize = 10;
+            }
+            d3.select(this)
+                .attr("font-size", `${fontSize}px`)
+                .attr("font-weight", "bold")
+                .text(`${format(d.value)}${valueUnit}`);
+                
+            // 检查文本是否适合矩形
+            const textWidth = chartUtils.text.measure(null, `${format(d.value)}${valueUnit}`, {
+                fontSize,
+                fontWeight: "bold"
+            }).width;
+            if (textWidth > rectWidth - 20 || (d.y1 - d.y0) < 70) {
+                // 如果文本太长或矩形太小，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/treemap_04.js

@@ -0,0 +1,304 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Treemap",
+    "chart_name": "treemap_04",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 20], [0, "inf"], [2, 6]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "hierarchy": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "overlay",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2); // 获取group字段
+    // 获取单位
+    const valueUnit = chartUtils.schema.column(dataColumns, 1).unit;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 50, left: 10 }; // 增加底部边距为图例留出空间
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备层次结构数据
+    // 将扁平数据转换为层次结构
+    const hierarchyData = {
+        name: "root",
+        children: []
+    };
+    
+    // 按组别分组数据
+    const groupedData = d3.group(chartData, d => d[groupField]);
+    
+    // 获取所有唯一的组
+    const groups = Array.from(groupedData.keys());
+    
+    // 将分组数据转换为层次结构
+    groupedData.forEach((values, group) => {
+        // 按类别再次分组
+        const categoryGroups = d3.group(values, d => d[categoryField]);
+        
+        const children = [];
+        categoryGroups.forEach((catValues, category) => {
+            // 计算该类别的总值
+            const total = d3.sum(catValues, d => +d[valueField]);
+            
+            children.push({
+                name: category,
+                group: group,
+                value: total
+            });
+        });
+        
+        hierarchyData.children.push({
+            name: group,
+            children: children
+        });
+    });
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "tableau10" }).value;
+    
+    // 计算树图布局
+    const root = d3.treemap()
+        .size([chartWidth, chartHeight])
+        .padding(5)
+        .round(true)
+        .tile(d3.treemapSquarify.ratio(1.6)) // 直接在squarify上设置比例
+        (d3.hierarchy(hierarchyData)
+            .sum(d => d.value)
+            .sort((a, b) => b.value - a.value));
+    
+    // 为每个叶子节点创建一个单元格
+    const leaf = g.selectAll("g.leaf")
+        .data(root.leaves())
+        .join("g")
+        .attr("class", "leaf")
+        .attr("transform", d => `translate(${d.x0},${d.y0})`);
+    
+    // 添加矩形
+    leaf.append("rect")
+        .attr("width", d => Math.max(0, d.x1 - d.x0))
+        .attr("height", d => Math.max(0, d.y1 - d.y0))
+        .attr("rx", 8)
+        .attr("ry", 8)
+        .attr("fill", d => {
+            // 获取组名称
+            const group = d.data.group;
+            return colorScale(group);
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none");
+    
+    // 为每个矩形添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    leaf.append("title")
+        .text(d => `${d.data.name} (${d.data.group}): ${format(d.value)}`);
+    
+    // 创建包含标签和图标的组
+    const labelGroup = leaf.append("g")
+        .attr("transform", "translate(12, 12)"); // 增加边距
+    const measureCategoryLabelWidth = value => chartUtils.text.measure(null, value, {
+        fontSize: 16,
+        fontWeight: "bold"
+    }).width;
+    const measureValueLabelWidth = value => chartUtils.text.measure(null, value, {
+        fontSize: 16
+    }).width;
+    
+    // 添加类别标签 (x label) - 变大并放在左上角，使用白色
+    labelGroup.append("text")
+        .attr("class", "category-label")
+        .attr("x", 0)
+        .attr("y", 18)
+        .attr("fill", "#ffffff")
+        .attr("font-size", "16px") // 减小字体大小
+        .attr("font-weight", "bold") // 使用粗体
+        .text(d => d.data.name)
+        .each(function(d) {
+            const rectWidth = d.x1 - d.x0;
+            const rectHeight = d.y1 - d.y0;
+            const text = d3.select(this);
+            const textWidth = measureCategoryLabelWidth(text.text());
+            
+            // 检查矩形是否过窄，但高度足够
+            if (rectWidth < 70 && rectHeight > 120 && textWidth > rectWidth - 12) {
+                // 对于窄而高的矩形，使用垂直文本
+                text.attr("transform", "rotate(90)")
+                    .attr("x", 18) // 现在x成为垂直位置
+                    .attr("y", -5); // 现在y成为水平位置（负值向左移动）
+                
+                // 重新检查文本是否适合高度
+                if (textWidth > rectHeight - 20) {
+                    // 如果文本太长，截断它
+                    let textContent = text.text();
+                    let displayText = textContent;
+                    while (measureCategoryLabelWidth(displayText) > rectHeight - 20 && textContent.length > 0) {
+                        textContent = textContent.slice(0, -1);
+                        displayText = textContent + "...";
+                        text.text(displayText);
+                    }
+                }
+            } else if (textWidth > rectWidth - 12) {
+                // 如果文本太长，截断它
+                let textContent = text.text();
+                let displayText = textContent;
+                while (measureCategoryLabelWidth(displayText) > rectWidth - 12 && textContent.length > 0) {
+                    textContent = textContent.slice(0, -1);
+                    displayText = textContent + "...";
+                    text.text(displayText);
+                }
+            }
+        });
+    
+    // 添加图标（在x label右侧）
+    labelGroup.each(function(d) {
+        const g = d3.select(this);
+        const categoryName = d.data.name;
+        const rectWidth = d.x1 - d.x0;
+        const rectHeight = d.y1 - d.y0;
+        const textElement = g.select(".category-label").node();
+        const isVertical = textElement && textElement.getAttribute("transform") && textElement.getAttribute("transform").includes("rotate(90)");
+        
+        // 获取图标，只在矩形足够宽或足够高且文本为垂直时显示
+        if (images.field && images.field[categoryName] && 
+            ((rectWidth > 100 && !isVertical) || (isVertical && rectHeight > 120))) {
+            const textWidth = textElement ? measureCategoryLabelWidth(d3.select(textElement).text()) : 0;
+            
+            if (isVertical) {
+                // 垂直布局时，图标放在下方
+                g.append("circle")
+                    .attr("cx", 18) // 与垂直文本同样的x值
+                    .attr("cy", textWidth + 20) // 文本高度 + 一些间距
+                    .attr("r", 16)
+                    .attr("fill", "#ffffff")
+                    .attr("fill-opacity", 0.75);
+                
+                g.append("image")
+                    .attr("x", 2) // 居中放置
+                    .attr("y", textWidth + 4) // 文本高度 + 一些间距
+                    .attr("width", 32)
+                    .attr("height", 32)
+                    .attr("xlink:href", images.field[categoryName]);
+            } else {
+                // 水平布局
+                g.append("circle")
+                    .attr("cx", textWidth + 30)
+                    .attr("cy", 10)
+                    .attr("r", 22)
+                    .attr("fill", "#ffffff")
+                    .attr("fill-opacity", 0.75)
+                    .attr("stroke", "none");
+                
+                g.append("image")
+                    .attr("x", textWidth + 14)
+                    .attr("y", -6)
+                    .attr("width", 32)
+                    .attr("height", 32)
+                    .attr("xlink:href", images.field[categoryName]);
+            }
+        }
+    });
+    
+    // 添加值标签 (data label) - 放在x label下方，使用黑色，添加单位
+    labelGroup.append("text")
+        .attr("x", 0)
+        .attr("y", 42) // 放在x label下方
+        .attr("fill", "#000000") // 使用黑色
+        .attr("font-size", "16px") // 字体变大
+        .text(d => `${format(d.value)}${valueUnit}`) // 添加单位
+        .each(function(d) {
+            // 检查文本是否适合矩形
+            const textWidth = measureValueLabelWidth(`${format(d.value)}${valueUnit}`);
+            const rectWidth = d.x1 - d.x0;
+            const parentGroup = d3.select(this.parentNode);
+            const categoryLabel = parentGroup.select(".category-label").node();
+            const isVertical = categoryLabel && categoryLabel.getAttribute("transform") && categoryLabel.getAttribute("transform").includes("rotate(90)");
+            
+            // 如果类别标签是垂直的，值标签也应该调整
+            if (isVertical) {
+                d3.select(this)
+                    .attr("transform", "rotate(90)")
+                    .attr("x", 50) // 在垂直类别标签下方
+                    .attr("y", -5); // 相同的水平位置
+                
+                if (textWidth > d.y1 - d.y0 - 70 || rectWidth < 50) {
+                    // 如果文本太长或矩形太窄，隐藏它
+                    d3.select(this).style("display", "none");
+                }
+            } else if (textWidth > rectWidth - 24 || (d.y1 - d.y0) < 70) {
+                // 如果文本太长或矩形太小，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+    
+    chartUtils.legend.draw(svg, groups, {
+        color: d => colorScale(d),
+        markerShape: "rect",
+        markerWidth: 20,
+        markerHeight: 20,
+        markerSize: 20,
+        markerRadius: 4,
+        markerOpacity: 0.8,
+        labelGap: 5,
+        itemGap: 18,
+        rowGap: 8,
+        itemHeight: 20,
+        itemPaddingEnd: 0,
+        maxWidth: chartWidth,
+        align: "center",
+        x: margin.left,
+        y: height - margin.bottom + 10,
+        fontSize: 14,
+        textColor: "#333333",
+        className: "legend",
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/treemap_05.js

@@ -0,0 +1,229 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Treemap",
+    "chart_name": "treemap_05_hand",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "icon_mark": "overlay",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    // 获取单位
+    const valueUnit = chartUtils.schema.column(dataColumns, 1).unit;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备层次结构数据
+    // 将扁平数据转换为层次结构
+    const hierarchyData = {
+        name: "root",
+        children: []
+    };
+    
+    // 按类别分组数据
+    const groupedData = d3.group(chartData, d => d[categoryField]);
+    
+    // 将分组数据转换为层次结构
+    groupedData.forEach((values, category) => {
+        // 计算该类别的总值
+        const total = d3.sum(values, d => +d[valueField]);
+        
+        hierarchyData.children.push({
+            name: category,
+            value: total
+        });
+    });
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, hierarchyData.children.findIndex(item => item.name === d), { palette: "tableau10" }).value;
+    
+    // 计算树图布局
+    const root = d3.treemap()
+        .size([chartWidth, chartHeight])
+        .padding(12)
+        .round(true)
+        (d3.hierarchy(hierarchyData)
+            .sum(d => d.value)
+            .sort((a, b) => b.value - a.value));
+    
+    // 为每个叶子节点创建一个单元格
+    const leaf = g.selectAll("g")
+        .data(root.leaves())
+        .join("g")
+        .attr("transform", d => `translate(${d.x0},${d.y0})`);
+    
+    // 添加矩形
+    leaf.append("rect")
+        .attr("width", d => Math.max(0, d.x1 - d.x0))
+        .attr("height", d => Math.max(0, d.y1 - d.y0))
+        .attr("rx", 3)
+        .attr("ry", 3)
+        .attr("fill", d => {
+            // 获取类别名称
+            const category = d.data.name;
+            return colorScale(category);
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none");
+    
+    // 为每个矩形添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    leaf.append("title")
+        .text(d => `${d.data.name}: ${format(d.value)}`);
+    
+    // 创建包含标签和图标的组
+    const labelGroup = leaf.append("g")
+        .attr("transform", "translate(12, 12)"); // 增加边距
+    const measureCategoryLabelWidth = value => chartUtils.text.measure(null, value, {
+        fontSize: 20,
+        fontWeight: "bold"
+    }).width;
+    const measureValueLabelWidth = value => chartUtils.text.measure(null, value, {
+        fontSize: 16
+    }).width;
+    
+    // 添加类别标签 (x label) - 变大并放在左上角，使用白色
+    labelGroup.append("text")
+        .attr("class", "category-label")
+        .attr("x", 0)
+        .attr("y", 18)
+        .attr("fill", "#ffffff")
+        .attr("font-size", "20px") // 字体变得更大
+        .attr("font-weight", "bold") // 使用粗体
+        .text(d => d.data.name)
+        .each(function(d) {
+            // 检查文本是否适合矩形（考虑图标宽度）
+            const rectWidth = d.x1 - d.x0 - 48; // 减去图标宽度和更多间距
+            const maxTextWidth = rectWidth - 12;
+            
+            // 如果文本太长，截断它
+            const text = d3.select(this);
+            let textContent = text.text();
+            let displayText = textContent;
+            while (measureCategoryLabelWidth(displayText) > maxTextWidth && textContent.length > 0) {
+                textContent = textContent.slice(0, -1);
+                displayText = textContent + "...";
+                text.text(displayText);
+            }
+        });
+    
+    // 添加图标（在x label右侧）
+    labelGroup.each(function(d) {
+        const g = d3.select(this);
+        const categoryName = d.data.name;
+        
+        // 获取图标
+        if (images.field && images.field[categoryName]) {
+            const textWidth = measureCategoryLabelWidth(g.select(".category-label").text());
+            
+            // 添加白色填充的圆形背景
+            g.append("circle")
+                .attr("cx", textWidth + 30) // 放在文本右侧，向右移动10px
+                .attr("cy", 10) // 向下移动10px
+                .attr("r", 22) // 半径增加到22 (17+5)
+                .attr("fill", "#ffffff") // 纯白色填充
+                .attr("fill-opacity", 0.75) // 75%透明度
+                .attr("stroke", "none"); // 移除描边
+            
+            g.append("image")
+                .attr("x", textWidth + 14) // 放在文本右侧，向右移动10px
+                .attr("y", -6) // 调整y位置，向下移动10px
+                .attr("width", 32)
+                .attr("height", 32)
+                .attr("xlink:href", images.field[categoryName]);
+        }
+    });
+    
+    // 添加值标签 (data label) - 放在x label下方，使用黑色，添加单位
+    labelGroup.append("text")
+        .attr("x", 0)
+        .attr("y", 42) // 放在x label下方
+        .attr("fill", "#000000") // 使用黑色
+        .attr("font-size", "16px") // 字体变大
+        .text(d => `${format(d.value)}${valueUnit}`) // 添加单位
+        .each(function(d) {
+            // 检查文本是否适合矩形
+            const textWidth = measureValueLabelWidth(`${format(d.value)}${valueUnit}`);
+            const rectWidth = d.x1 - d.x0;
+            
+            if (textWidth > rectWidth - 24 || (d.y1 - d.y0) < 70) {
+                // 如果文本太长或矩形太小，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+
+    const roughness = 1;
+    const bowing = 2;
+    const fillStyle = "solid";
+    const randomize = false;
+    const pencilFilter = false;
+        
+    const svgConverter = new svg2roughjs.Svg2Roughjs(containerSelector);
+    svgConverter.pencilFilter = pencilFilter;
+    svgConverter.randomize = randomize;
+    svgConverter.svg = svg.node();
+    svgConverter.roughConfig = {
+        bowing,
+        roughness,
+        fillStyle
+    };
+    svgConverter.sketch();
+    // Remove the first SVG element if it exists
+    const firstSvg = document.querySelector(`${containerSelector} svg`);
+    if (firstSvg) {
+        firstSvg.remove();
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/treemap_05_dark.js

@@ -0,0 +1,232 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Treemap",
+    "chart_name": "treemap_05_dark",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "dark",
+    "icon_mark": "overlay",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors_dark || { 
+        text_color: "#000000", 
+        other: { primary: "#4682B4", secondary: "#FF7F50" } 
+    }; 
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    // 获取单位
+    const valueUnit = chartUtils.schema.column(dataColumns, 1).unit;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备层次结构数据
+    // 将扁平数据转换为层次结构
+    const hierarchyData = {
+        name: "root",
+        children: []
+    };
+    
+    // 按类别分组数据
+    const groupedData = d3.group(chartData, d => d[categoryField]);
+    
+    // 将分组数据转换为层次结构
+    groupedData.forEach((values, category) => {
+        // 计算该类别的总值
+        const total = d3.sum(values, d => +d[valueField]);
+        
+        hierarchyData.children.push({
+            name: category,
+            value: total
+        });
+    });
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, hierarchyData.children.findIndex(item => item.name === d), { palette: "tableau10" }).value;
+    
+    // 计算树图布局
+    const root = d3.treemap()
+        .size([chartWidth, chartHeight])
+        .padding(12)
+        .round(true)
+        (d3.hierarchy(hierarchyData)
+            .sum(d => d.value)
+            .sort((a, b) => b.value - a.value));
+    
+    // 为每个叶子节点创建一个单元格
+    const leaf = g.selectAll("g")
+        .data(root.leaves())
+        .join("g")
+        .attr("transform", d => `translate(${d.x0},${d.y0})`);
+    
+    // 添加矩形
+    leaf.append("rect")
+        .attr("width", d => Math.max(0, d.x1 - d.x0))
+        .attr("height", d => Math.max(0, d.y1 - d.y0))
+        .attr("rx", 3)
+        .attr("ry", 3)
+        .attr("fill", d => {
+            // 获取类别名称
+            const category = d.data.name;
+            return colorScale(category);
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none");
+    
+    // 为每个矩形添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    leaf.append("title")
+        .text(d => `${d.data.name}: ${format(d.value)}`);
+    
+    // 创建包含标签和图标的组
+    const labelGroup = leaf.append("g")
+        .attr("transform", "translate(12, 12)"); // 增加边距
+    const measureCategoryLabelWidth = value => chartUtils.text.measure(null, value, {
+        fontSize: 20,
+        fontWeight: "bold"
+    }).width;
+    const measureValueLabelWidth = value => chartUtils.text.measure(null, value, {
+        fontSize: 16
+    }).width;
+    
+    // 添加类别标签 (x label) - 变大并放在左上角，使用白色
+    labelGroup.append("text")
+        .attr("class", "category-label")
+        .attr("x", 0)
+        .attr("y", 18)
+        .attr("fill", "#ffffff")
+        .attr("font-size", "20px") // 字体变得更大
+        .attr("font-weight", "bold") // 使用粗体
+        .text(d => d.data.name)
+        .each(function(d) {
+            // 检查文本是否适合矩形（考虑图标宽度）
+            const rectWidth = d.x1 - d.x0 - 48; // 减去图标宽度和更多间距
+            const maxTextWidth = rectWidth - 12;
+            
+            // 如果文本太长，截断它
+            const text = d3.select(this);
+            let textContent = text.text();
+            let displayText = textContent;
+            while (measureCategoryLabelWidth(displayText) > maxTextWidth && textContent.length > 0) {
+                textContent = textContent.slice(0, -1);
+                displayText = textContent + "...";
+                text.text(displayText);
+            }
+        });
+    
+    // 添加图标（在x label右侧）
+    labelGroup.each(function(d) {
+        const g = d3.select(this);
+        const categoryName = d.data.name;
+        
+        // 获取图标
+        if (images.field && images.field[categoryName]) {
+            const textWidth = measureCategoryLabelWidth(g.select(".category-label").text());
+            
+            // 添加白色填充的圆形背景
+            g.append("circle")
+                .attr("cx", textWidth + 30) // 放在文本右侧，向右移动10px
+                .attr("cy", 10) // 向下移动10px
+                .attr("r", 22) // 半径增加到22 (17+5)
+                .attr("fill", "#ffffff") // 纯白色填充
+                .attr("fill-opacity", 0.75) // 75%透明度
+                .attr("stroke", "none"); // 移除描边
+            
+            g.append("image")
+                .attr("x", textWidth + 14) // 放在文本右侧，向右移动10px
+                .attr("y", -6) // 调整y位置，向下移动10px
+                .attr("width", 32)
+                .attr("height", 32)
+                .attr("xlink:href", images.field[categoryName]);
+        }
+    });
+    
+    // 添加值标签 (data label) - 放在x label下方，使用黑色，添加单位
+    labelGroup.append("text")
+        .attr("x", 0)
+        .attr("y", 42) // 放在x label下方
+        .attr("fill", "#ffffff") 
+        .attr("font-size", "16px") // 字体变大
+        .text(d => `${format(d.value)}${valueUnit}`) // 添加单位
+        .each(function(d) {
+            // 检查文本是否适合矩形
+            const textWidth = measureValueLabelWidth(`${format(d.value)}${valueUnit}`);
+            const rectWidth = d.x1 - d.x0;
+            
+            if (textWidth > rectWidth - 24 || (d.y1 - d.y0) < 70) {
+                // 如果文本太长或矩形太小，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+
+    const roughness = 1;
+    const bowing = 2;
+    const fillStyle = "solid";
+    const randomize = false;
+    const pencilFilter = false;
+        
+    const svgConverter = new svg2roughjs.Svg2Roughjs(containerSelector);
+    svgConverter.pencilFilter = pencilFilter;
+    svgConverter.randomize = randomize;
+    svgConverter.svg = svg.node();
+    svgConverter.roughConfig = {
+        bowing,
+        roughness,
+        fillStyle
+    };
+    svgConverter.sketch();
+    // Remove the first SVG element if it exists
+    const firstSvg = document.querySelector(`${containerSelector} svg`);
+    if (firstSvg) {
+        firstSvg.remove();
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/treemap_06.js

@@ -0,0 +1,347 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Treemap",
+    "chart_name": "treemap_06_hand",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "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);
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    // 获取单位
+    const valueUnit = chartUtils.schema.column(dataColumns, 1).unit;
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备层次结构数据
+    // 将扁平数据转换为层次结构
+    const hierarchyData = {
+        name: "root",
+        children: []
+    };
+    
+    // 按类别分组数据
+    const groupedData = d3.group(chartData, d => d[categoryField]);
+    
+    // 将分组数据转换为层次结构
+    groupedData.forEach((values, category) => {
+        // 计算该类别的总值
+        const total = d3.sum(values, d => +d[valueField]);
+        
+        hierarchyData.children.push({
+            name: category,
+            value: total
+        });
+    });
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, hierarchyData.children.findIndex(item => item.name === d), { palette: "tableau10" }).value;
+    
+    // 计算树图布局
+    const root = d3.treemap()
+        .size([chartWidth, chartHeight])
+        .padding(3)
+        .round(true)
+        (d3.hierarchy(hierarchyData)
+            .sum(d => d.value)
+            .sort((a, b) => b.value - a.value));
+    
+    // 为每个叶子节点创建一个单元格
+    const leaf = g.selectAll("g")
+        .data(root.leaves())
+        .join("g")
+        .attr("transform", d => `translate(${d.x0},${d.y0})`);
+    
+    // 添加矩形
+    leaf.append("rect")
+        .attr("width", d => Math.max(0, d.x1 - d.x0))
+        .attr("height", d => Math.max(0, d.y1 - d.y0))
+        .attr("rx", 3)
+        .attr("ry", 3)
+        .attr("fill", d => {
+            // 获取类别名称
+            const category = d.data.name;
+            return colorScale(category);
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none");
+    
+    // 为每个矩形添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    leaf.append("title")
+        .text(d => `${d.data.name}: ${format(d.value)}`);
+    
+    // 创建包含标签的组
+    const labelGroup = leaf.append("g")
+        .attr("transform", "translate(12, 12)"); // 增加边距
+    
+    // 计算每个矩形的大小，用于自适应标签显示
+    leaf.each(function(d) {
+        d.rectWidth = d.x1 - d.x0 - 24; // 可用宽度
+        d.rectHeight = d.y1 - d.y0 - 24; // 可用高度
+    });
+    
+    // 添加类别标签背景 (x label背景)
+    labelGroup.append("rect")
+        .attr("class", "category-label-bg")
+        .attr("x", -6)
+        .attr("y", 0)
+        .attr("rx", 3)
+        .attr("ry", 3)
+        .attr("fill", "#ffffff")
+        .attr("fill-opacity", 0.75)
+        .attr("width", d => Math.min(d.rectWidth, 200)) // 限制最大宽度
+        .attr("height", d => {
+            // 根据矩形大小调整背景高度
+            const rectSize = Math.min(d.rectWidth, d.rectHeight);
+            if (rectSize < 50) return 20; // 非常小的矩形
+            if (rectSize < 80) return 24; // 较小的矩形
+            return 28; // 正常大小的矩形
+        });
+    
+    // 计算适合的字体大小函数
+    function calculateFontSize(d) {
+        const rectSize = Math.min(d.rectWidth, d.rectHeight);
+        if (rectSize < 40) return 8; // 非常小的矩形
+        if (rectSize < 60) return 10; // 较小的矩形
+        if (rectSize < 80) return 12; // 中等大小的矩形
+        if (rectSize < 100) return 14; // 较大的矩形
+        if (rectSize < 150) return 16; // 大矩形
+        return 20; // 非常大的矩形
+    }
+    
+    // 添加类别标签 (x label) - 自适应大小并放在左上角，使用黑色
+    labelGroup.append("text")
+        .attr("class", "category-label")
+        .attr("x", 0)
+        .attr("y", d => {
+            const fontSize = calculateFontSize(d);
+            return Math.min(18, fontSize + 4); // 根据字体大小调整y位置
+        })
+        .attr("fill", "#000000")
+        .attr("font-weight", "bold")
+        .each(function(d) {
+            const fontSize = calculateFontSize(d);
+            const measureCategoryText = value => chartUtils.text.measure(null, value, {
+                fontSize,
+                fontWeight: "bold"
+            });
+            d3.select(this).attr("font-size", `${fontSize}px`);
+            
+            // 处理文本自适应显示
+            const text = d3.select(this);
+            const maxWidth = Math.max(30, d.rectWidth - 12);
+            const textContent = d.data.name;
+            d.categoryLabelHeight = measureCategoryText(textContent).height;
+            
+            // 设置原始文本进行测量
+            text.text(textContent);
+            
+            // 检查是否需要换行或截断
+            if (measureCategoryText(textContent).width > maxWidth) {
+                // 尝试分词并换行显示
+                const words = textContent.split(/\s+/);
+                // 如果只有一个词，则截断显示
+                if (words.length <= 1) {
+                    let displayText = textContent;
+                    let renderedText = displayText;
+                    // 即使是非常小的矩形也尝试显示尽可能多的文本
+                    while (measureCategoryText(renderedText).width > maxWidth && displayText.length > 1) {
+                        displayText = displayText.slice(0, -1);
+                        renderedText = displayText + "...";
+                        text.text(renderedText);
+                    }
+                } else {
+                    // 多个词尝试换行显示
+                    text.text(null); // 清空文本
+                    let line = [];
+                    let lineNumber = 0;
+                    const lineHeight = fontSize * 1.1;
+                    let tspan = text.append("tspan")
+                        .attr("x", 0)
+                        .attr("dy", 0);
+                    
+                    // 一个一个词添加并检查是否需要换行
+                    words.forEach((word, i) => {
+                        line.push(word);
+                        tspan.text(line.join(" "));
+                        
+                        if (measureCategoryText(line.join(" ")).width > maxWidth) {
+                            if (line.length === 1) {
+                                // 单词太长，需要截断
+                                let wordToFit = line[0];
+                                let renderedWord = wordToFit;
+                                tspan.text("");
+                                while (wordToFit.length > 1) {
+                                    tspan.text(renderedWord);
+                                    if (measureCategoryText(renderedWord).width <= maxWidth) break;
+                                    wordToFit = wordToFit.slice(0, -1);
+                                    renderedWord = wordToFit + "...";
+                                    tspan.text(renderedWord);
+                                }
+                            } else {
+                                // 回退一个词，换行
+                                line.pop();
+                                tspan.text(line.join(" "));
+                                line = [word];
+                                lineNumber++;
+                                
+                                // 最多显示2行
+                                if (lineNumber >= 2) {
+                                    tspan.text(tspan.text() + "...");
+                                    return;
+                                }
+                                
+                                tspan = text.append("tspan")
+                                    .attr("x", 0)
+                                    .attr("dy", lineHeight)
+                                    .text(word);
+                            }
+                        }
+                    });
+                    
+                    // 调整背景高度以适应多行文本
+                    if (lineNumber > 0) {
+                        const bgRect = d3.select(this.parentNode).select(".category-label-bg");
+                        bgRect.attr("height", (lineNumber + 1) * lineHeight + 4);
+                        d.categoryLabelHeight = (lineNumber + 1) * lineHeight;
+                    }
+                }
+            }
+        });
+    
+    // 添加值标签背景 (data label背景)
+    labelGroup.append("rect")
+        .attr("class", "value-label-bg")
+        .attr("x", -6)
+        .attr("y", function(d) {
+            // 计算y位置，考虑类别标签可能是多行的情况
+            const categoryHeight = d.categoryLabelHeight || chartUtils.text.measure(null, d.data.name, {
+                fontSize: calculateFontSize(d),
+                fontWeight: "bold"
+            }).height;
+            return categoryHeight + 6;
+        })
+        .attr("rx", 3)
+        .attr("ry", 3)
+        .attr("fill", "#ffffff")
+        .attr("fill-opacity", 0.75)
+        .each(function(d) {
+            // 确定值标签背景的宽度和高度
+            const fontSize = Math.max(8, calculateFontSize(d) - 4); // 值标签字体比类别标签小
+            const valueText = `${format(d.value)}${valueUnit}`;
+            
+            const parentNode = d3.select(this.parentNode);
+            const textWidth = chartUtils.text.measure(parentNode, valueText, { fontSize }).width;
+            
+            const labelWidth = Math.min(textWidth + 12, d.rectWidth);
+            d3.select(this)
+                .attr("width", labelWidth)
+                .attr("height", fontSize + 4);
+            
+            // 如果矩形太小，隐藏值标签
+            if (d.rectHeight < 50) {
+                d3.select(this).style("display", "none");
+            }
+        });
+    
+    // 添加值标签 (data label) - 放在x label下方，使用黑色，添加单位
+    labelGroup.append("text")
+        .attr("class", "value-label")
+        .attr("x", 0)
+        .attr("fill", "#000000")
+        .each(function(d) {
+            // 获取类别标签的高度，用于定位值标签
+            const categoryHeight = d.categoryLabelHeight || chartUtils.text.measure(null, d.data.name, {
+                fontSize: calculateFontSize(d),
+                fontWeight: "bold"
+            }).height;
+            
+            // 设置字体大小和y位置
+            const fontSize = Math.max(8, calculateFontSize(d) - 4); // 值标签字体比类别标签小
+            d3.select(this)
+                .attr("font-size", `${fontSize}px`)
+                .attr("y", categoryHeight + fontSize + 6)
+                .text(`${format(d.value)}${valueUnit}`);
+            
+            // 如果矩形太小，隐藏值标签
+            if (d.rectHeight < 50) {
+                d3.select(this).style("display", "none");
+                d3.select(this.parentNode).select(".value-label-bg").style("display", "none");
+            }
+        });
+
+    const roughness = 1;
+    const bowing = 2;
+    const fillStyle = "hachure";
+    const randomize = false;
+    const pencilFilter = false;
+        
+    const svgConverter = new svg2roughjs.Svg2Roughjs(containerSelector);
+    svgConverter.pencilFilter = pencilFilter;
+    svgConverter.randomize = randomize;
+    svgConverter.svg = svg.node();
+    svgConverter.roughConfig = {
+        bowing,
+        roughness,
+        fillStyle
+    };
+    svgConverter.sketch();
+    // Remove the first SVG element if it exists
+    const firstSvg = document.querySelector(`${containerSelector} svg`);
+    if (firstSvg) {
+        firstSvg.remove();
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/voronoi_treemap_circle_01.js

@@ -0,0 +1,324 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Voronoi Treemap",
+    "chart_name": "voronoi_treemap_plain_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[5, 40], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备数据
+    const processedData = chartData.map(d => ({
+        name: d[categoryField],
+        weight: d[valueField]
+    }));
+    
+    // 创建颜色比例尺
+    const colorScale = d => {
+        if (colorResolver.field(d, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(d, 0, { fallbackKey: "primary" }).value;
+        }
+        const uniqueCategories = [...new Set(chartData.map(d => d[categoryField]))];
+        return chartUtils.color.palette(uniqueCategories.indexOf(d), { palette: "tableau10" });
+    };
+    
+    // 计算圆形裁剪区域
+    const radius = Math.min(chartWidth, chartHeight) / 2;
+    const centerX = chartWidth / 2;
+    const centerY = chartHeight / 2;
+    
+    // 创建圆形裁剪多边形 - 使用多边形近似圆形
+    const numPoints = 50;
+    const clip = [];
+    for (let i = 0; i < numPoints; i++) {
+        const angle = (i / numPoints) * 2 * Math.PI;
+        clip.push([
+            centerX + radius * Math.cos(angle),
+            centerY + radius * Math.sin(angle)
+        ]);
+    }
+    
+    // 创建 Voronoi Map 模拟
+    const simulation = d3.voronoiMapSimulation(processedData)
+        .weight(d => d.weight)
+        .clip(clip)
+        .stop();
+    
+    // 运行模拟直到结束 - 限制迭代次数以避免超时
+    let state = simulation.state();
+    let iterations = 0;
+    const maxIterations = 300; // 限制最大迭代次数
+    
+    while (!state.ended && iterations < maxIterations) {
+        simulation.tick();
+        state = simulation.state();
+        iterations++;
+    }
+    
+    // 获取最终的多边形
+    const polygons = state.polygons;
+    
+    // 绘制多边形
+    const cells = g.selectAll("g.cell")
+        .data(polygons)
+        .enter()
+        .append("g")
+        .attr("class", "cell");
+    
+    // 添加单元格
+    cells.append("path")
+        .attr("d", d => {
+            return "M" + d.join("L") + "Z";
+        })
+        .attr("fill", d => {
+            try {
+                return colorScale(d.site.originalObject.data.originalData.name);
+            } catch (e) {
+                console.error("Error accessing color data:", e);
+                return "#ccc"; // 默认颜色
+            }
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none")
+    
+    // 添加文本标签
+    cells.append("text")
+        .attr("x", d => {
+            try {
+                return d3.polygonCentroid(d)[0];
+            } catch (e) {
+                console.error("Error calculating centroid:", e);
+                return 0;
+            }
+        })
+        .attr("y", d => {
+            try {
+                return d3.polygonCentroid(d)[1];
+            } catch (e) {
+                console.error("Error calculating centroid:", e);
+                return 0;
+            }
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => {
+            try {
+                return d.site.originalObject.data.originalData.name;
+            } catch (e) {
+                console.error("Error accessing name data:", e);
+                return "";
+            }
+        })
+        .each(function(d) {
+            try {
+                // 计算多边形的边界框
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                d.forEach(point => {
+                    minX = Math.min(minX, point[0]);
+                    minY = Math.min(minY, point[1]);
+                    maxX = Math.max(maxX, point[0]);
+                    maxY = Math.max(maxY, point[1]);
+                });
+                
+                const boxWidth = maxX - minX;
+                const boxHeight = maxY - minY;
+                
+                // 检查文本是否适合单元格
+                const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+                
+                if (textWidth > boxWidth * 0.8 || boxHeight < 30) {
+                    // 如果文本太长或单元格太小，缩小字体而不是隐藏
+                    d3.select(this)
+                        .attr("font-size", "10px")
+                        .text(function() {
+                            const origText = this.textContent;
+                            // 如果文本超过10个字符且单元格很小，尝试换行
+                            if (origText.length > 10 && boxHeight < 40) {
+                                const midPoint = Math.floor(origText.length / 2);
+                                // 找到最近的空格或标点符号
+                                let breakPoint = midPoint;
+                                const punctuation = [' ', '，', '。', '、', ',', '.'];
+                                let minDistance = origText.length;
+                                
+                                for (let i = 0; i < origText.length; i++) {
+                                    if (punctuation.includes(origText[i])) {
+                                        const distance = Math.abs(i - midPoint);
+                                        if (distance < minDistance) {
+                                            minDistance = distance;
+                                            breakPoint = i;
+                                        }
+                                    }
+                                }
+                                
+                                // 如果找到合适的断点就换行，否则直接在中间换行
+                                if (punctuation.includes(origText[breakPoint])) {
+                                    return origText.substring(0, breakPoint + 1) + '\n' + origText.substring(breakPoint + 1);
+                                } else {
+                                    return origText.substring(0, midPoint) + '\n' + origText.substring(midPoint);
+                                }
+                            }
+                            return origText;
+                        })
+                        .attr("dy", function() {
+                            // 如果文本包含换行符，调整垂直位置
+                            return this.textContent.includes('\n') ? "-0.5em" : "0";
+                        });
+                    
+                    // 如果文本包含换行符，创建第二行
+                    if (d3.select(this).text().includes('\n')) {
+                        const lines = d3.select(this).text().split('\n');
+                        d3.select(this).text(lines[0]);
+                        
+                        // 添加第二行
+                        g.append("text")
+                            .attr("x", d3.polygonCentroid(d)[0])
+                            .attr("y", d3.polygonCentroid(d)[1])
+                            .attr("text-anchor", "middle")
+                            .attr("dominant-baseline", "middle")
+                            .attr("fill", "#fff")
+                            .attr("font-size", "10px")
+                            .attr("font-weight", "bold")
+                            .attr("dy", "1em")
+                            .text(lines[1]);
+                    }
+                }
+            } catch (e) {
+                console.error("Error in text sizing:", e);
+                // 即使出错也不隐藏文本，而是显示小号字体
+                d3.select(this).attr("font-size", "8px");
+            }
+        });
+    
+    // 添加值标签
+    const format = value => chartUtils.format.autoText(+value);
+    cells.append("text")
+        .attr("x", d => {
+            try {
+                return d3.polygonCentroid(d)[0];
+            } catch (e) {
+                return 0;
+            }
+        })
+        .attr("y", d => {
+            try {
+                // 根据分类标签是否换行来调整位置
+                const name = d.site.originalObject.data.originalData.name;
+                const offset = name.length > 10 ? 25 : 15;
+                return d3.polygonCentroid(d)[1] + offset;
+            } catch (e) {
+                return 0;
+            }
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("fill-opacity", 0.7)
+        .attr("font-size", "14px")
+        .text(d => {
+            try {
+                return format(d.site.originalObject.data.originalData.weight);
+            } catch (e) {
+                console.error("Error accessing weight data:", e);
+                return "";
+            }
+        })
+        .each(function(d) {
+            try {
+                // 计算多边形的边界框
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                d.forEach(point => {
+                    minX = Math.min(minX, point[0]);
+                    minY = Math.min(minY, point[1]);
+                    maxX = Math.max(maxX, point[0]);
+                    maxY = Math.max(maxY, point[1]);
+                });
+                
+                const boxWidth = maxX - minX;
+                const boxHeight = maxY - minY;
+                
+                // 检查文本是否适合单元格
+                const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+                
+                if (textWidth > boxWidth * 0.8 || boxHeight < 40) {
+                    // 如果单元格很小，缩小字体而不是隐藏文本
+                    d3.select(this)
+                        .attr("font-size", "8px")
+                        .attr("fill-opacity", 0.9);
+                }
+            } catch (e) {
+                console.error("Error in value sizing:", e);
+                // 即使出错也不隐藏文本，而是显示小号字体
+                d3.select(this).attr("font-size", "8px");
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/voronoi_treemap_circle_01_dark.js

@@ -0,0 +1,327 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Voronoi Treemap(Circle)",
+    "chart_name": "voronoi_treemap_circle_01_dark",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[5, 40], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors_dark || { 
+        text_color: "#000000", 
+        other: { primary: "#4682B4", secondary: "#FF7F50" } 
+    }; 
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备数据
+    const processedData = chartData.map(d => ({
+        name: d[categoryField],
+        weight: d[valueField]
+    }));
+    
+    // 创建颜色比例尺
+    const colorScale = d => {
+        if (colorResolver.field(d, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(d, 0, { fallbackKey: "primary" }).value;
+        }
+        const uniqueCategories = [...new Set(chartData.map(d => d[categoryField]))];
+        return chartUtils.color.palette(uniqueCategories.indexOf(d), { palette: "tableau10" });
+    };
+    
+    // 计算圆形裁剪区域
+    const radius = Math.min(chartWidth, chartHeight) / 2;
+    const centerX = chartWidth / 2;
+    const centerY = chartHeight / 2;
+    
+    // 创建圆形裁剪多边形 - 使用多边形近似圆形
+    const numPoints = 50;
+    const clip = [];
+    for (let i = 0; i < numPoints; i++) {
+        const angle = (i / numPoints) * 2 * Math.PI;
+        clip.push([
+            centerX + radius * Math.cos(angle),
+            centerY + radius * Math.sin(angle)
+        ]);
+    }
+    
+    // 创建 Voronoi Map 模拟
+    const simulation = d3.voronoiMapSimulation(processedData)
+        .weight(d => d.weight)
+        .clip(clip)
+        .stop();
+    
+    // 运行模拟直到结束 - 限制迭代次数以避免超时
+    let state = simulation.state();
+    let iterations = 0;
+    const maxIterations = 300; // 限制最大迭代次数
+    
+    while (!state.ended && iterations < maxIterations) {
+        simulation.tick();
+        state = simulation.state();
+        iterations++;
+    }
+    
+    // 获取最终的多边形
+    const polygons = state.polygons;
+    
+    // 绘制多边形
+    const cells = g.selectAll("g.cell")
+        .data(polygons)
+        .enter()
+        .append("g")
+        .attr("class", "cell");
+    
+    // 添加单元格
+    cells.append("path")
+        .attr("d", d => {
+            return "M" + d.join("L") + "Z";
+        })
+        .attr("fill", d => {
+            try {
+                return colorScale(d.site.originalObject.data.originalData.name);
+            } catch (e) {
+                console.error("Error accessing color data:", e);
+                return "#ccc"; // 默认颜色
+            }
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none")
+    
+    // 添加文本标签
+    cells.append("text")
+        .attr("x", d => {
+            try {
+                return d3.polygonCentroid(d)[0];
+            } catch (e) {
+                console.error("Error calculating centroid:", e);
+                return 0;
+            }
+        })
+        .attr("y", d => {
+            try {
+                return d3.polygonCentroid(d)[1];
+            } catch (e) {
+                console.error("Error calculating centroid:", e);
+                return 0;
+            }
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => {
+            try {
+                return d.site.originalObject.data.originalData.name;
+            } catch (e) {
+                console.error("Error accessing name data:", e);
+                return "";
+            }
+        })
+        .each(function(d) {
+            try {
+                // 计算多边形的边界框
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                d.forEach(point => {
+                    minX = Math.min(minX, point[0]);
+                    minY = Math.min(minY, point[1]);
+                    maxX = Math.max(maxX, point[0]);
+                    maxY = Math.max(maxY, point[1]);
+                });
+                
+                const boxWidth = maxX - minX;
+                const boxHeight = maxY - minY;
+                
+                // 检查文本是否适合单元格
+                const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+                
+                if (textWidth > boxWidth * 0.8 || boxHeight < 30) {
+                    // 如果文本太长或单元格太小，缩小字体而不是隐藏
+                    d3.select(this)
+                        .attr("font-size", "10px")
+                        .text(function() {
+                            const origText = this.textContent;
+                            // 如果文本超过10个字符且单元格很小，尝试换行
+                            if (origText.length > 10 && boxHeight < 40) {
+                                const midPoint = Math.floor(origText.length / 2);
+                                // 找到最近的空格或标点符号
+                                let breakPoint = midPoint;
+                                const punctuation = [' ', '，', '。', '、', ',', '.'];
+                                let minDistance = origText.length;
+                                
+                                for (let i = 0; i < origText.length; i++) {
+                                    if (punctuation.includes(origText[i])) {
+                                        const distance = Math.abs(i - midPoint);
+                                        if (distance < minDistance) {
+                                            minDistance = distance;
+                                            breakPoint = i;
+                                        }
+                                    }
+                                }
+                                
+                                // 如果找到合适的断点就换行，否则直接在中间换行
+                                if (punctuation.includes(origText[breakPoint])) {
+                                    return origText.substring(0, breakPoint + 1) + '\n' + origText.substring(breakPoint + 1);
+                                } else {
+                                    return origText.substring(0, midPoint) + '\n' + origText.substring(midPoint);
+                                }
+                            }
+                            return origText;
+                        })
+                        .attr("dy", function() {
+                            // 如果文本包含换行符，调整垂直位置
+                            return this.textContent.includes('\n') ? "-0.5em" : "0";
+                        });
+                    
+                    // 如果文本包含换行符，创建第二行
+                    if (d3.select(this).text().includes('\n')) {
+                        const lines = d3.select(this).text().split('\n');
+                        d3.select(this).text(lines[0]);
+                        
+                        // 添加第二行
+                        g.append("text")
+                            .attr("x", d3.polygonCentroid(d)[0])
+                            .attr("y", d3.polygonCentroid(d)[1])
+                            .attr("text-anchor", "middle")
+                            .attr("dominant-baseline", "middle")
+                            .attr("fill", "#fff")
+                            .attr("font-size", "10px")
+                            .attr("font-weight", "bold")
+                            .attr("dy", "1em")
+                            .text(lines[1]);
+                    }
+                }
+            } catch (e) {
+                console.error("Error in text sizing:", e);
+                // 即使出错也不隐藏文本，而是显示小号字体
+                d3.select(this).attr("font-size", "8px");
+            }
+        });
+    
+    // 添加值标签
+    const format = value => chartUtils.format.autoText(+value);
+    cells.append("text")
+        .attr("x", d => {
+            try {
+                return d3.polygonCentroid(d)[0];
+            } catch (e) {
+                return 0;
+            }
+        })
+        .attr("y", d => {
+            try {
+                // 根据分类标签是否换行来调整位置
+                const name = d.site.originalObject.data.originalData.name;
+                const offset = name.length > 10 ? 25 : 15;
+                return d3.polygonCentroid(d)[1] + offset;
+            } catch (e) {
+                return 0;
+            }
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("fill-opacity", 0.7)
+        .attr("font-size", "14px")
+        .text(d => {
+            try {
+                return format(d.site.originalObject.data.originalData.weight);
+            } catch (e) {
+                console.error("Error accessing weight data:", e);
+                return "";
+            }
+        })
+        .each(function(d) {
+            try {
+                // 计算多边形的边界框
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                d.forEach(point => {
+                    minX = Math.min(minX, point[0]);
+                    minY = Math.min(minY, point[1]);
+                    maxX = Math.max(maxX, point[0]);
+                    maxY = Math.max(maxY, point[1]);
+                });
+                
+                const boxWidth = maxX - minX;
+                const boxHeight = maxY - minY;
+                
+                // 检查文本是否适合单元格
+                const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+                
+                if (textWidth > boxWidth * 0.8 || boxHeight < 40) {
+                    // 如果单元格很小，缩小字体而不是隐藏文本
+                    d3.select(this)
+                        .attr("font-size", "8px")
+                        .attr("fill-opacity", 0.9);
+                }
+            } catch (e) {
+                console.error("Error in value sizing:", e);
+                // 即使出错也不隐藏文本，而是显示小号字体
+                d3.select(this).attr("font-size", "8px");
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/voronoi_treemap_circle_02.js

@@ -0,0 +1,324 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Voronoi Treemap(Circle)",
+    "chart_name": "voronoi_treemap_circle_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[5, 40], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备数据
+    const processedData = chartData.map(d => ({
+        name: d[categoryField],
+        weight: d[valueField]
+    }));
+    
+    // 创建颜色比例尺
+    const colorScale = d => {
+        if (colorResolver.field(d, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(d, 0, { fallbackKey: "primary" }).value;
+        }
+        const uniqueCategories = [...new Set(chartData.map(d => d[categoryField]))];
+        return chartUtils.color.palette(uniqueCategories.indexOf(d), { palette: "tableau10" });
+    };
+    
+    // 计算圆形裁剪区域
+    const radius = Math.min(chartWidth, chartHeight) / 2;
+    const centerX = chartWidth / 2;
+    const centerY = chartHeight / 2;
+    
+    // 创建圆形裁剪多边形 - 使用多边形近似圆形
+    const numPoints = 50;
+    const clip = [];
+    for (let i = 0; i < numPoints; i++) {
+        const angle = (i / numPoints) * 2 * Math.PI;
+        clip.push([
+            centerX + radius * Math.cos(angle),
+            centerY + radius * Math.sin(angle)
+        ]);
+    }
+    
+    // 创建 Voronoi Map 模拟
+    const simulation = d3.voronoiMapSimulation(processedData)
+        .weight(d => d.weight)
+        .clip(clip)
+        .stop();
+    
+    // 运行模拟直到结束 - 限制迭代次数以避免超时
+    let state = simulation.state();
+    let iterations = 0;
+    const maxIterations = 300; // 限制最大迭代次数
+    
+    while (!state.ended && iterations < maxIterations) {
+        simulation.tick();
+        state = simulation.state();
+        iterations++;
+    }
+    
+    // 获取最终的多边形
+    const polygons = state.polygons;
+    
+    // 绘制多边形
+    const cells = g.selectAll("g.cell")
+        .data(polygons)
+        .enter()
+        .append("g")
+        .attr("class", "cell");
+    
+    // 添加单元格
+    cells.append("path")
+        .attr("d", d => {
+            return "M" + d.join("L") + "Z";
+        })
+        .attr("fill", d => {
+            try {
+                return colorScale(d.site.originalObject.data.originalData.name);
+            } catch (e) {
+                console.error("Error accessing color data:", e);
+                return "#ccc"; // 默认颜色
+            }
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none")
+    
+    // 添加文本标签
+    cells.append("text")
+        .attr("x", d => {
+            try {
+                return d3.polygonCentroid(d)[0];
+            } catch (e) {
+                console.error("Error calculating centroid:", e);
+                return 0;
+            }
+        })
+        .attr("y", d => {
+            try {
+                return d3.polygonCentroid(d)[1];
+            } catch (e) {
+                console.error("Error calculating centroid:", e);
+                return 0;
+            }
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => {
+            try {
+                return d.site.originalObject.data.originalData.name;
+            } catch (e) {
+                console.error("Error accessing name data:", e);
+                return "";
+            }
+        })
+        .each(function(d) {
+            try {
+                // 计算多边形的边界框
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                d.forEach(point => {
+                    minX = Math.min(minX, point[0]);
+                    minY = Math.min(minY, point[1]);
+                    maxX = Math.max(maxX, point[0]);
+                    maxY = Math.max(maxY, point[1]);
+                });
+                
+                const boxWidth = maxX - minX;
+                const boxHeight = maxY - minY;
+                
+                // 检查文本是否适合单元格
+                const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+                
+                if (textWidth > boxWidth * 0.8 || boxHeight < 30) {
+                    // 如果文本太长或单元格太小，缩小字体而不是隐藏
+                    d3.select(this)
+                        .attr("font-size", "10px")
+                        .text(function() {
+                            const origText = this.textContent;
+                            // 如果文本超过10个字符且单元格很小，尝试换行
+                            if (origText.length > 10 && boxHeight < 40) {
+                                const midPoint = Math.floor(origText.length / 2);
+                                // 找到最近的空格或标点符号
+                                let breakPoint = midPoint;
+                                const punctuation = [' ', '，', '。', '、', ',', '.'];
+                                let minDistance = origText.length;
+                                
+                                for (let i = 0; i < origText.length; i++) {
+                                    if (punctuation.includes(origText[i])) {
+                                        const distance = Math.abs(i - midPoint);
+                                        if (distance < minDistance) {
+                                            minDistance = distance;
+                                            breakPoint = i;
+                                        }
+                                    }
+                                }
+                                
+                                // 如果找到合适的断点就换行，否则直接在中间换行
+                                if (punctuation.includes(origText[breakPoint])) {
+                                    return origText.substring(0, breakPoint + 1) + '\n' + origText.substring(breakPoint + 1);
+                                } else {
+                                    return origText.substring(0, midPoint) + '\n' + origText.substring(midPoint);
+                                }
+                            }
+                            return origText;
+                        })
+                        .attr("dy", function() {
+                            // 如果文本包含换行符，调整垂直位置
+                            return this.textContent.includes('\n') ? "-0.5em" : "0";
+                        });
+                    
+                    // 如果文本包含换行符，创建第二行
+                    if (d3.select(this).text().includes('\n')) {
+                        const lines = d3.select(this).text().split('\n');
+                        d3.select(this).text(lines[0]);
+                        
+                        // 添加第二行
+                        g.append("text")
+                            .attr("x", d3.polygonCentroid(d)[0])
+                            .attr("y", d3.polygonCentroid(d)[1])
+                            .attr("text-anchor", "middle")
+                            .attr("dominant-baseline", "middle")
+                            .attr("fill", "#fff")
+                            .attr("font-size", "10px")
+                            .attr("font-weight", "bold")
+                            .attr("dy", "1em")
+                            .text(lines[1]);
+                    }
+                }
+            } catch (e) {
+                console.error("Error in text sizing:", e);
+                // 即使出错也不隐藏文本，而是显示小号字体
+                d3.select(this).attr("font-size", "8px");
+            }
+        });
+    
+    // 添加值标签
+    const format = value => chartUtils.format.autoText(+value);
+    cells.append("text")
+        .attr("x", d => {
+            try {
+                return d3.polygonCentroid(d)[0];
+            } catch (e) {
+                return 0;
+            }
+        })
+        .attr("y", d => {
+            try {
+                // 根据分类标签是否换行来调整位置
+                const name = d.site.originalObject.data.originalData.name;
+                const offset = name.length > 10 ? 25 : 15;
+                return d3.polygonCentroid(d)[1] + offset;
+            } catch (e) {
+                return 0;
+            }
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("fill-opacity", 0.7)
+        .attr("font-size", "14px")
+        .text(d => {
+            try {
+                return format(d.site.originalObject.data.originalData.weight);
+            } catch (e) {
+                console.error("Error accessing weight data:", e);
+                return "";
+            }
+        })
+        .each(function(d) {
+            try {
+                // 计算多边形的边界框
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                d.forEach(point => {
+                    minX = Math.min(minX, point[0]);
+                    minY = Math.min(minY, point[1]);
+                    maxX = Math.max(maxX, point[0]);
+                    maxY = Math.max(maxY, point[1]);
+                });
+                
+                const boxWidth = maxX - minX;
+                const boxHeight = maxY - minY;
+                
+                // 检查文本是否适合单元格
+                const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+                
+                if (textWidth > boxWidth * 0.8 || boxHeight < 40) {
+                    // 如果单元格很小，缩小字体而不是隐藏文本
+                    d3.select(this)
+                        .attr("font-size", "8px")
+                        .attr("fill-opacity", 0.9);
+                }
+            } catch (e) {
+                console.error("Error in value sizing:", e);
+                // 即使出错也不隐藏文本，而是显示小号字体
+                d3.select(this).attr("font-size", "8px");
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/voronoi_treemap_circle_03.js

@@ -0,0 +1,343 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Voronoi Treemap(Circle)",
+    "chart_name": "voronoi_treemap_circle_03_hand",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[5, 40], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备数据
+    const processedData = chartData.map(d => ({
+        name: d[categoryField],
+        weight: d[valueField]
+    }));
+    
+    // 创建颜色比例尺
+    const colorScale = d => {
+        if (colorResolver.field(d, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(d, 0, { fallbackKey: "primary" }).value;
+        }
+        const uniqueCategories = [...new Set(chartData.map(d => d[categoryField]))];
+        return chartUtils.color.palette(uniqueCategories.indexOf(d), { palette: "tableau10" });
+    };
+    
+    // 计算圆形裁剪区域
+    const radius = Math.min(chartWidth, chartHeight) / 2;
+    const centerX = chartWidth / 2;
+    const centerY = chartHeight / 2;
+    
+    // 创建圆形裁剪多边形 - 使用多边形近似圆形
+    const numPoints = 50;
+    const clip = [];
+    for (let i = 0; i < numPoints; i++) {
+        const angle = (i / numPoints) * 2 * Math.PI;
+        clip.push([
+            centerX + radius * Math.cos(angle),
+            centerY + radius * Math.sin(angle)
+        ]);
+    }
+    
+    // 创建 Voronoi Map 模拟
+    const simulation = d3.voronoiMapSimulation(processedData)
+        .weight(d => d.weight)
+        .clip(clip)
+        .stop();
+    
+    // 运行模拟直到结束 - 限制迭代次数以避免超时
+    let state = simulation.state();
+    let iterations = 0;
+    const maxIterations = 300; // 限制最大迭代次数
+    
+    while (!state.ended && iterations < maxIterations) {
+        simulation.tick();
+        state = simulation.state();
+        iterations++;
+    }
+    
+    // 获取最终的多边形
+    const polygons = state.polygons;
+    
+    // 绘制多边形
+    const cells = g.selectAll("g.cell")
+        .data(polygons)
+        .enter()
+        .append("g")
+        .attr("class", "cell");
+    
+    // 添加单元格
+    cells.append("path")
+        .attr("d", d => {
+            return "M" + d.join("L") + "Z";
+        })
+        .attr("fill", d => {
+            try {
+                return colorScale(d.site.originalObject.data.originalData.name);
+            } catch (e) {
+                console.error("Error accessing color data:", e);
+                return "#ccc"; // 默认颜色
+            }
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none")
+    
+    // 添加文本标签
+    cells.append("text")
+        .attr("x", d => {
+            try {
+                return d3.polygonCentroid(d)[0];
+            } catch (e) {
+                console.error("Error calculating centroid:", e);
+                return 0;
+            }
+        })
+        .attr("y", d => {
+            try {
+                return d3.polygonCentroid(d)[1];
+            } catch (e) {
+                console.error("Error calculating centroid:", e);
+                return 0;
+            }
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => {
+            try {
+                return d.site.originalObject.data.originalData.name;
+            } catch (e) {
+                console.error("Error accessing name data:", e);
+                return "";
+            }
+        })
+        .each(function(d) {
+            try {
+                // 计算多边形的边界框
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                d.forEach(point => {
+                    minX = Math.min(minX, point[0]);
+                    minY = Math.min(minY, point[1]);
+                    maxX = Math.max(maxX, point[0]);
+                    maxY = Math.max(maxY, point[1]);
+                });
+                
+                const boxWidth = maxX - minX;
+                const boxHeight = maxY - minY;
+                
+                // 检查文本是否适合单元格
+                const text = d3.select(this);
+                const measureTextWidth = () => chartUtils.text.measure(null, text.text(), {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(text.attr("font-size")) || 12,
+                    fontWeight: text.attr("font-weight") || "normal"
+                }).width;
+                const textWidth = measureTextWidth();
+                
+                // 不再隐藏文本，而是调整大小
+                if (textWidth > boxWidth * 0.8) {
+                    // 如果文本太长，逐步缩小字体
+                    let fontSize = 14;
+                    text.attr("font-size", `${fontSize}px`);
+                    
+                    while (measureTextWidth() > boxWidth * 0.9 && fontSize > 8) {
+                        fontSize -= 1;
+                        text.attr("font-size", `${fontSize}px`);
+                    }
+                    
+                    // 如果字体已经很小但仍然太宽，尝试换行显示
+                    if (measureTextWidth() > boxWidth * 0.9) {
+                        const originalText = text.text();
+                        if (originalText.length > 3) {
+                            // 分成两行
+                            const midPoint = Math.ceil(originalText.length / 2);
+                            const firstLine = originalText.substring(0, midPoint);
+                            const secondLine = originalText.substring(midPoint);
+                            
+                            // 清除原始文本
+                            text.text("");
+                            
+                            // 添加第一行
+                            text.append("tspan")
+                                .attr("x", d3.polygonCentroid(d)[0])
+                                .attr("dy", "-0.3em")
+                                .text(firstLine);
+                            
+                            // 添加第二行
+                            text.append("tspan")
+                                .attr("x", d3.polygonCentroid(d)[0])
+                                .attr("dy", "1.2em")
+                                .text(secondLine);
+                        }
+                    }
+                }
+            } catch (e) {
+                console.error("Error in text sizing:", e);
+            }
+        });
+    
+    // 添加值标签
+    const format = value => chartUtils.format.autoText(+value);
+    cells.append("text")
+        .attr("class", "value-label")
+        .attr("x", d => {
+            try {
+                return d3.polygonCentroid(d)[0];
+            } catch (e) {
+                return 0;
+            }
+        })
+        .attr("y", d => {
+            try {
+                return d3.polygonCentroid(d)[1] + 15;
+            } catch (e) {
+                return 0;
+            }
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("fill-opacity", 0.7)
+        .attr("font-size", "14px")
+        .text(d => {
+            try {
+                return format(d.site.originalObject.data.originalData.weight);
+            } catch (e) {
+                console.error("Error accessing weight data:", e);
+                return "";
+            }
+        })
+        .each(function(d) {
+            try {
+                // 计算多边形的边界框
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                d.forEach(point => {
+                    minX = Math.min(minX, point[0]);
+                    minY = Math.min(minY, point[1]);
+                    maxX = Math.max(maxX, point[0]);
+                    maxY = Math.max(maxY, point[1]);
+                });
+                
+                const boxWidth = maxX - minX;
+                const boxHeight = maxY - minY;
+                
+                // 检查文本是否适合单元格
+                const text = d3.select(this);
+                const measureTextWidth = () => chartUtils.text.measure(null, text.text(), {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(text.attr("font-size")) || 12,
+                    fontWeight: text.attr("font-weight") || "normal"
+                }).width;
+                const textWidth = measureTextWidth();
+                
+                // 确保值标签显示
+                if (textWidth > boxWidth * 0.8) {
+                    // 如果值标签太长，调整字体大小
+                    let fontSize = 12;
+                    text.attr("font-size", `${fontSize}px`);
+                    
+                    // 降低字体大小
+                    while (measureTextWidth() > boxWidth * 0.85 && fontSize > 7) {
+                        fontSize -= 1;
+                        text.attr("font-size", `${fontSize}px`);
+                    }
+                    
+                    // 如果单元格很小，调整y位置，避免与名称标签重叠
+                    const nameLabel = d3.select(this.parentNode).select("text:not(.value-label)");
+                    
+                    // 如果单元名称使用了两行显示（有tspan元素），则需要下移值标签
+                    if (nameLabel.selectAll("tspan").size() > 0) {
+                        text.attr("y", d => {
+                            try {
+                                return d3.polygonCentroid(d)[1] + 25;
+                            } catch (e) {
+                                return 0;
+                            }
+                        });
+                    }
+                }
+            } catch (e) {
+                console.error("Error in value sizing:", e);
+            }
+        });
+
+    const roughness = 1;
+    const bowing = 2;
+    const fillStyle = "solid";
+    const randomize = false;
+    const pencilFilter = false;
+        
+    const svgConverter = new svg2roughjs.Svg2Roughjs(containerSelector);
+    svgConverter.pencilFilter = pencilFilter;
+    svgConverter.randomize = randomize;
+    svgConverter.svg = svg.node();
+    svgConverter.roughConfig = {
+        bowing,
+        roughness,
+        fillStyle
+    };
+    svgConverter.sketch();
+    // Remove the first SVG element if it exists
+    const firstSvg = document.querySelector(`${containerSelector} svg`);
+    if (firstSvg) {
+        firstSvg.remove();
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/voronoi_treemap_circle_04.js

@@ -0,0 +1,340 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Voronoi Treemap(Circle)",
+    "chart_name": "voronoi_treemap_circle_04",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[5, 40], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const initialMargin = { // 引入初始边距，图例将影响顶边距
+        top: variables.margin?.top ?? 10, 
+        right: variables.margin?.right ?? 10, 
+        bottom: variables.margin?.bottom ?? 10, 
+        left: variables.margin?.left ?? 10 
+    };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // chartWidth 用于图例换行计算，在图例逻辑之前定义
+    const chartWidth = width - initialMargin.left - initialMargin.right;
+    // chartHeight 和主图表区域的 g 将在图例计算后定义
+
+    // 准备数据 (在图例和主图表逻辑都会用到)
+    const processedData = chartData.map(d => ({
+        name: d[categoryField],
+        weight: d[valueField]
+    }));
+    
+    const colorScale = d => {
+        if (colorResolver.field(d, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(d, 0, { fallbackKey: "primary" }).value;
+        }
+        const localUniqueCategories = [...new Set(chartData.map(d => d[categoryField]))]; 
+        return chartUtils.color.palette(localUniqueCategories.indexOf(d), { palette: "tableau10" });
+    };
+
+    // ---------- 图例逻辑 (借鉴 rectangle_03) ----------
+    const uniqueCategories = [...new Set(chartData.map(d => d[categoryField]))];
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    function getTextWidthHelper(text, fontFamily, fontSize, fontWeight) {
+        ctx.font = `${fontWeight || 'normal'} ${fontSize}px ${fontFamily || 'Arial'}`;
+        return chartUtils.text.contextWidth(ctx, text);
+    }
+
+    let legendBlockHeight = 0;
+    const legendLines = [];
+    const paddingBelowLegendToChart = 15; 
+    const minSvgGlobalTopPadding = 10; 
+    let legendItemMaxHeight = 0; 
+    let interLineVerticalPadding = parseFloat(typography.label?.line_spacing || '6'); 
+    let legendInterItemSpacing = 10; 
+
+    if (uniqueCategories && uniqueCategories.length > 0 && images) { 
+        const legendColorRectWidth = 12;
+        const legendColorRectHeight = 12;
+        const legendIconWidth = typography.label?.icon_size || 16; 
+        const legendIconHeight = typography.label?.icon_size || 16;
+        const legendPaddingRectIcon = 4; 
+        const legendPaddingIconText = 4; 
+        
+        const legendFontFamily = typography.label?.font_family || 'Arial';
+        const legendFontSize = parseFloat(typography.label?.font_size || '12');
+        const legendFontWeight = typography.label?.font_weight || 'normal';
+
+        legendItemMaxHeight = Math.max(legendColorRectHeight, legendIconHeight, legendFontSize);
+
+        const legendItemsData = uniqueCategories.map(catName => {
+            const text = String(catName);
+            const color = colorScale(catName);
+            const iconUrl = images.field && images.field[catName] ? images.field[catName] : null;
+            const textWidth = getTextWidthHelper(text, legendFontFamily, legendFontSize, legendFontWeight);
+            
+            let itemVisualWidth = legendColorRectWidth;
+            if (iconUrl) {
+                itemVisualWidth += legendPaddingRectIcon + legendIconWidth + legendPaddingIconText;
+            } else {
+                itemVisualWidth += legendPaddingRectIcon; 
+            }
+            itemVisualWidth += textWidth;
+            return { text, color, iconUrl, textWidth, visualWidth: itemVisualWidth };
+        });
+
+        const legendLayout = chartUtils.legend.wrapItems(
+            legendItemsData.map(item => ({ ...item, width: item.visualWidth, height: legendItemMaxHeight })),
+            {
+                maxWidth: chartWidth,
+                itemGap: legendInterItemSpacing,
+                rowGap: interLineVerticalPadding,
+                itemHeight: legendItemMaxHeight,
+            }
+        );
+        legendLines.push(...legendLayout.rows.map(row => ({
+            items: row.items,
+            totalVisualWidth: row.width,
+        })));
+        legendBlockHeight = legendLayout.height;
+    }
+
+    let effectiveMarginTop;
+    let legendStartY = minSvgGlobalTopPadding;
+    if (legendBlockHeight > 0) {
+        effectiveMarginTop = legendStartY + legendBlockHeight + paddingBelowLegendToChart;
+    } else {
+        effectiveMarginTop = Math.max(initialMargin.top, minSvgGlobalTopPadding);
+    }
+    
+    // 重新计算主图表区域的 chartHeight 和 centerY (用于圆形裁剪)
+    const mainChartHeight = height - effectiveMarginTop - initialMargin.bottom; // Renamed to mainChartHeight to avoid conflict if chartHeight is used above for legend width context
+
+    if (mainChartHeight <= 0) {
+        console.warn("Voronoi Treemap (Circle): Chart height is not positive after accommodating legend and margins.");
+        // return null; // Or handle error appropriately
+    }
+
+    // ---------- 绘制图例 (如果存在) ----------
+    if (legendBlockHeight > 0 && legendLines.length > 0) {
+        const legendContainerGroup = svg.append("g")
+            .attr("class", "custom-legend-container")
+            .attr("transform", `translate(0, ${legendStartY})`);
+        let currentLineBaseY = 0; 
+        const currentLegendInterItemSpacing = legendInterItemSpacing;
+
+        legendLines.forEach((line) => {
+            const lineRenderStartX = initialMargin.left + (chartWidth - line.totalVisualWidth) / 2;
+            const lineCenterY = currentLineBaseY + legendItemMaxHeight / 2;
+            let currentItemDrawX = lineRenderStartX;
+            const legendColorRectWidth = 12; 
+            const legendColorRectHeight = 12;
+            const legendIconWidth = typography.label?.icon_size || 16;
+            const legendIconHeight = typography.label?.icon_size || 16;
+            const legendPaddingRectIcon = 4;
+            const legendPaddingIconText = 4;
+            const legendFontFamily = typography.label?.font_family || 'Arial';
+            const legendFontSize = parseFloat(typography.label?.font_size || '12');
+            const legendFontWeight = typography.label?.font_weight || 'normal';
+
+            line.items.forEach((item, itemIndex) => {
+                legendContainerGroup.append("rect")
+                    .attr("x", currentItemDrawX)
+                    .attr("y", currentLineBaseY + (legendItemMaxHeight - legendColorRectHeight) / 2)
+                    .attr("width", legendColorRectWidth).attr("height", legendColorRectHeight)
+                    .attr("fill", item.color).attr("fill-opacity", 0.85);
+                currentItemDrawX += legendColorRectWidth;
+                if (item.iconUrl) {
+                    currentItemDrawX += legendPaddingRectIcon;
+                    legendContainerGroup.append("image").attr("xlink:href", item.iconUrl)
+                        .attr("x", currentItemDrawX)
+                        .attr("y", currentLineBaseY + (legendItemMaxHeight - legendIconHeight) / 2)
+                        .attr("width", legendIconWidth).attr("height", legendIconHeight)
+                        .attr("preserveAspectRatio", "xMidYMid meet");
+                    currentItemDrawX += legendIconWidth + legendPaddingIconText;
+                } else {
+                    currentItemDrawX += legendPaddingRectIcon; 
+                }
+                legendContainerGroup.append("text").attr("x", currentItemDrawX).attr("y", lineCenterY)
+                    .attr("dominant-baseline", "middle")
+                    .style("font-family", legendFontFamily).style("font-size", `${legendFontSize}px`)
+                    .style("font-weight", legendFontWeight).style("fill", colorResolver.text({ fallback: "#333333" }).value || typography.label?.font_color || "#333333")
+                    .text(item.text);
+                currentItemDrawX += item.textWidth; 
+                if (itemIndex < line.items.length - 1) {
+                     currentItemDrawX += (line.items[itemIndex+1].visualWidth > 0 ? (currentLegendInterItemSpacing || 10) : 0) ;
+                }
+            });
+            currentLineBaseY += legendItemMaxHeight + interLineVerticalPadding;
+        });
+    }
+
+    // ---------- 创建主图表绘图区域 (g) ----------
+    const g = svg.append("g")
+        .attr("transform", `translate(${initialMargin.left}, ${effectiveMarginTop})`);
+
+    // 计算圆形裁剪区域 - 使用新的 mainChartHeight 和 chartWidth (for radius calculation if width constrained)
+    // chartWidth for the main drawing area is the same as for legend (width - initialMargin.left - initialMargin.right)
+    const mainChartContentWidth = chartWidth; 
+    const radius = Math.min(mainChartContentWidth, mainChartHeight) / 2;
+    const centerX = mainChartContentWidth / 2;
+    const centerY = mainChartHeight / 2;
+    
+    // 创建圆形裁剪多边形 - 使用多边形近似圆形
+    const numPoints = 50;
+    const clip = [];
+    for (let i = 0; i < numPoints; i++) {
+        const angle = (i / numPoints) * 2 * Math.PI;
+        clip.push([
+            centerX + radius * Math.cos(angle),
+            centerY + radius * Math.sin(angle)
+        ]);
+    }
+    
+    // 创建 Voronoi Map 模拟
+    const simulation = d3.voronoiMapSimulation(processedData)
+        .weight(d => d.weight)
+        .clip(clip)
+        .stop();
+    
+    // 运行模拟直到结束 - 限制迭代次数以避免超时
+    let state = simulation.state();
+    let iterations = 0;
+    const maxIterations = 300; // 限制最大迭代次数
+    
+    while (!state.ended && iterations < maxIterations) {
+        simulation.tick();
+        state = simulation.state();
+        iterations++;
+    }
+    
+    // 获取最终的多边形
+    const polygons = state.polygons;
+    
+    // 绘制多边形
+    const cells = g.selectAll("g.cell")
+        .data(polygons)
+        .enter()
+        .append("g")
+        .attr("class", "cell");
+    
+    // 添加单元格
+    cells.append("path")
+        .attr("d", d => {
+            return "M" + d.join("L") + "Z";
+        })
+        .attr("fill", d => {
+            try {
+                return colorScale(d.site.originalObject.data.originalData.name);
+            } catch (e) {
+                console.error("Error accessing color data:", e);
+                return "#ccc"; // 默认颜色
+            }
+        })
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none")
+    
+    // 添加值标签 (调整为只显示数值，并适应单元格)
+    const format = value => chartUtils.format.autoText(+value);
+    cells.append("text")
+        .attr("class", "value-label-cell")
+        .attr("x", d => {
+            try { return d3.polygonCentroid(d)[0]; } catch (e) { console.error("Centroid error for value:", e); return 0; }
+        })
+        .attr("y", d => {
+            try { return d3.polygonCentroid(d)[1]; } catch (e) { console.error("Centroid error for value:", e); return 0; }
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#ffffff")
+        .attr("font-size", typography.value?.font_size || "12px") // 调整基础字体大小
+        .attr("font-weight", typography.value?.font_weight || "normal")
+        .text(d => {
+            try { return format(d.site.originalObject.data.originalData.weight); } catch (e) { console.error("Weight data error:", e); return ""; }
+        })
+        .each(function(d) {
+            try {
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                d.forEach(point => {
+                    minX = Math.min(minX, point[0]);
+                    minY = Math.min(minY, point[1]);
+                    maxX = Math.max(maxX, point[0]);
+                    maxY = Math.max(maxY, point[1]);
+                });
+                const boxWidth = maxX - minX;
+                const boxHeight = maxY - minY;
+                const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+                const currentFontSize = parseFloat(this.getAttribute("font-size"));
+
+                // 如果文本太宽或太高，尝试缩小字体，最小到8px
+                if ((textWidth > boxWidth * 0.9 || currentFontSize > boxHeight * 0.7) && currentFontSize > 8) {
+                    this.setAttribute("font-size", Math.max(8, currentFontSize - 2) + "px");
+                    // 递归调用以再次检查，或直接隐藏如果还是太大
+                    const newTextWidth = chartUtils.text.measure(null, this.textContent || "", {
+                        fontFamily: "sans-serif",
+                        fontSize: parseFloat(this.getAttribute("font-size")) || 12,
+                        fontWeight: textSelection.attr("font-weight") || "normal"
+                    }).width;
+                    const newFontSize = parseFloat(this.getAttribute("font-size"));
+                    if (newTextWidth > boxWidth * 0.9 || newFontSize > boxHeight * 0.7) {
+                         d3.select(this).style("display", "none");
+                    }
+                } else if (textWidth > boxWidth * 0.9 || currentFontSize > boxHeight * 0.7) {
+                     d3.select(this).style("display", "none"); // 如果已经是8px还太大，则隐藏
+                }
+            } catch (e) {
+                console.error("Error in value label sizing:", e);
+                d3.select(this).style("display", "none"); // 出错则隐藏
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/voronoi_treemap_rectangle_01.js

@@ -0,0 +1,222 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Voronoi Treemap(Rectangle)",
+    "chart_name": "voronoi_treemap_rectangle_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 40], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备数据
+    const processedData = chartData.map(d => ({
+        name: d[categoryField],
+        weight: d[valueField]
+    }));
+    
+    // 创建颜色比例尺
+    const colorScale = d => {
+        if (colorResolver.field(d, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(d, 0, { fallbackKey: "primary" }).value;
+        }
+        const uniqueCategories = [...new Set(chartData.map(d => d[categoryField]))];
+        return chartUtils.color.palette(uniqueCategories.indexOf(d), { palette: "tableau10" });
+    };
+    
+    // 定义裁剪多边形（矩形）
+    const clip = [
+        [0, 0],
+        [0, chartHeight],
+        [chartWidth, chartHeight],
+        [chartWidth, 0]
+    ];
+    
+    // 创建 Voronoi Map 模拟
+    const simulation = d3.voronoiMapSimulation(processedData)
+        .weight(d => d.weight)
+        .clip(clip)
+        .stop();
+    
+    // 运行模拟直到结束
+    let state = simulation.state();
+    while (!state.ended) {
+        simulation.tick();
+        state = simulation.state();
+    }
+    
+    // 获取最终的多边形
+    const polygons = state.polygons;
+    
+    // 绘制多边形
+    const cells = g.selectAll("g")
+        .data(polygons)
+        .enter()
+        .append("g");
+    
+    // 添加单元格
+    cells.append("path")
+        .attr("d", d => {
+            return "M" + d.join("L") + "Z";
+        })
+        .attr("fill", d => colorScale(d.site.originalObject.data.originalData.name))
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none")
+    
+    // 为每个单元格添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    
+    // 添加文本标签
+    cells.append("text")
+        .attr("x", d => d3.polygonCentroid(d)[0])
+        .attr("y", d => d3.polygonCentroid(d)[1])
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => d.site.originalObject.data.originalData.name)
+        .each(function(d) {
+            // 计算多边形的边界框
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            d.forEach(point => {
+                minX = Math.min(minX, point[0]);
+                minY = Math.min(minY, point[1]);
+                maxX = Math.max(maxX, point[0]);
+                maxY = Math.max(maxY, point[1]);
+            });
+            
+            const boxWidth = maxX - minX;
+            const boxHeight = maxY - minY;
+            
+            // 检查文本是否适合单元格
+            const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+            
+            if (textWidth > boxWidth * 0.8 || boxHeight < 30) {
+                // 如果文本太长或单元格太小，在文本下方添加暗色透明框
+                // 创建一个新的g元素来包含背景框和文本
+                const textGroup = d3.select(this.parentNode)
+                    .append("g")
+                    .raise(); // 将整个组提升到最上层
+                
+                // 添加背景框
+                const padding = 4;
+                textGroup.append("rect")
+                    .attr("x", d3.polygonCentroid(d)[0] - textWidth/2 - padding)
+                    .attr("y", d3.polygonCentroid(d)[1] - 10)
+                    .attr("width", textWidth + padding * 2)
+                    .attr("height", 35)
+                    .attr("fill", "rgba(0,0,0,0.3)")
+                    .attr("rx", 3);
+                
+                // 将原始文本移动到新组中
+                d3.select(this).remove();
+                textGroup.append("text")
+                    .attr("x", d3.polygonCentroid(d)[0])
+                    .attr("y", d3.polygonCentroid(d)[1])
+                    .attr("text-anchor", "middle")
+                    .attr("dominant-baseline", "middle")
+                    .attr("fill", "#fff")
+                    .attr("font-size", "16px")
+                    .attr("font-weight", "bold")
+                    .text(d.site.originalObject.data.originalData.name);
+            }
+        });
+    
+    // 添加值标签
+    cells.append("text")
+        .attr("x", d => d3.polygonCentroid(d)[0])
+        .attr("y", d => d3.polygonCentroid(d)[1] + 15)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("fill-opacity", 0.7)
+        .attr("font-size", "14px")
+        .text(d => format(d.site.originalObject.data.originalData.weight))
+        .each(function(d) {
+            // 计算多边形的边界框
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            d.forEach(point => {
+                minX = Math.min(minX, point[0]);
+                minY = Math.min(minY, point[1]);
+                maxX = Math.max(maxX, point[0]);
+                maxY = Math.max(maxY, point[1]);
+            });
+            
+            const boxWidth = maxX - minX;
+            const boxHeight = maxY - minY;
+            
+            // 检查文本是否适合单元格
+            const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+            
+            if (textWidth > boxWidth * 0.8 || boxHeight < 40) {
+                // 如果文本太长或单元格太小，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/voronoi_treemap_rectangle_02.js

@@ -0,0 +1,297 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Voronoi Treemap(Rectangle)",
+    "chart_name": "voronoi_treemap_rectangle_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "icon_mark": "icon",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 10, right: 10, bottom: 10, left: 10 };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 准备数据
+    const processedData = chartData.map(d => ({
+        name: d[categoryField],
+        weight: d[valueField]
+    }));
+    
+    // 创建颜色比例尺
+    const colorScale = d => {
+        if (colorResolver.field(d, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(d, 0, { fallbackKey: "primary" }).value;
+        }
+        const uniqueCategories = [...new Set(chartData.map(d => d[categoryField]))];
+        return chartUtils.color.palette(uniqueCategories.indexOf(d), { palette: "tableau10" });
+    };
+    
+    // 定义裁剪多边形（矩形）
+    const clip = [
+        [0, 0],
+        [0, chartHeight],
+        [chartWidth, chartHeight],
+        [chartWidth, 0]
+    ];
+    
+    // 创建 Voronoi Map 模拟
+    const simulation = d3.voronoiMapSimulation(processedData)
+        .weight(d => d.weight)
+        .clip(clip)
+        .stop();
+    
+    // 运行模拟直到结束
+    let state = simulation.state();
+    while (!state.ended) {
+        simulation.tick();
+        state = simulation.state();
+    }
+    
+    // 获取最终的多边形
+    const polygons = state.polygons;
+    
+    // 定义纹理模式
+    // 创建纹理定义
+    const defs = svg.append("defs");
+    
+    // 创建几种不同的纹理图案
+    const patternTypes = [
+        { id: "pattern1", d: "M5,0 l5,10 l-10,0 z" }, // 三角形
+        { id: "pattern2", d: "M0,0 l10,0 l0,10 l-10,0 z" }, // 方块
+        { id: "pattern3", d: "M0,5 a5,5 0 1,0 10,0 a5,5 0 1,0 -10,0" }, // 圆圈
+        { id: "pattern4", d: "M0,0 l5,5 l-5,5 z" }, // 另一种三角形
+        { id: "pattern5", d: "M0,0 l5,10 l5,-10 z" }  // 菱形
+    ];
+    
+    // 为每个类别创建唯一的纹理
+    const uniqueCategories = [...new Set(chartData.map(d => d[categoryField]))];
+    uniqueCategories.forEach((category, i) => {
+        const color = colorScale(category);
+        const patternType = patternTypes[i % patternTypes.length];
+        
+        // 创建纹理图案
+        const pattern = defs.append("pattern")
+            .attr("id", `pattern-${category.replace(/\s+/g, '-').toLowerCase()}`)
+            .attr("width", 10)
+            .attr("height", 10)
+            .attr("patternUnits", "userSpaceOnUse")
+            .attr("patternTransform", "rotate(45)");
+        
+        // 背景
+        pattern.append("rect")
+            .attr("width", 10)
+            .attr("height", 10)
+            .attr("fill", color)
+            .attr("fill-opacity", 0.75);
+        
+        // 纹理元素
+        pattern.append("path")
+            .attr("d", patternType.d)
+            .attr("fill", "white")
+            .attr("fill-opacity", 0.2);
+    });
+    
+    // 绘制多边形
+    const cells = g.selectAll("g")
+        .data(polygons)
+        .enter()
+        .append("g");
+    
+    // 添��单元格
+    cells.append("path")
+        .attr("d", d => {
+            return "M" + d.join("L") + "Z";
+        })
+        .attr("fill", d => {
+            const categoryName = d.site.originalObject.data.originalData.name;
+            return `url(#pattern-${categoryName.replace(/\s+/g, '-').toLowerCase()})`;
+        })
+        .attr("stroke", d => colorScale(d.site.originalObject.data.originalData.name))
+        .attr("stroke-width", 1)
+        .attr("stroke-opacity", 0.5);
+    
+    // 为每个单元格添加工具提示
+    const format = value => chartUtils.format.autoText(+value);
+    
+    // 为足够大的区域添加图标
+    cells.each(function(d) {
+        // 计算多边形的边界框
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        d.forEach(point => {
+            minX = Math.min(minX, point[0]);
+            minY = Math.min(minY, point[1]);
+            maxX = Math.max(maxX, point[0]);
+            maxY = Math.max(maxY, point[1]);
+        });
+        
+        const boxWidth = maxX - minX;
+        const boxHeight = maxY - minY;
+        const categoryValue = d.site.originalObject.data.originalData.name;
+        
+        // 检查区域是否足够大以添加图标（至少50x50）
+        if (boxWidth >= 50 && boxHeight >= 50 && images.field && images.field[categoryValue]) {
+            const iconSize = 32;
+            const centerX = d3.polygonCentroid(d)[0];
+            const centerY = d3.polygonCentroid(d)[1] - 15; // 稍微上移，为标签留出空间
+            
+            d3.select(this).append("image")
+                .attr("xlink:href", images.field[categoryValue])
+                .attr("x", centerX - iconSize/2)
+                .attr("y", centerY - iconSize/2)
+                .attr("width", iconSize)
+                .attr("height", iconSize);
+        }
+    });
+    
+    // 添加文本标签
+    cells.append("text")
+        .attr("x", d => d3.polygonCentroid(d)[0])
+        .attr("y", d => d3.polygonCentroid(d)[1] + 20) // 下移标签，为图标留出空间
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => d.site.originalObject.data.originalData.name)
+        .each(function(d) {
+            // 计算多边形的边界框
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            d.forEach(point => {
+                minX = Math.min(minX, point[0]);
+                minY = Math.min(minY, point[1]);
+                maxX = Math.max(maxX, point[0]);
+                maxY = Math.max(maxY, point[1]);
+            });
+            
+            const boxWidth = maxX - minX;
+            const boxHeight = maxY - minY;
+            
+            // 检查文本是否适合单元格
+            const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+            
+            if (textWidth > boxWidth * 0.8 || boxHeight < 30) {
+                // 如果文本太长或单元格太小，在文本下方添加暗色透明框
+                // 创建一个新的g元素来包含背景框和文本
+                const textGroup = d3.select(this.parentNode)
+                    .append("g")
+                    .raise(); // 将整个组提升到最上层
+                
+                // 添加背景框
+                const padding = 4;
+                textGroup.append("rect")
+                    .attr("x", d3.polygonCentroid(d)[0] - textWidth/2 - padding)
+                    .attr("y", d3.polygonCentroid(d)[1] - 10)
+                    .attr("width", textWidth + padding * 2)
+                    .attr("height", 35)
+                    .attr("fill", "rgba(0,0,0,0.3)")
+                    .attr("rx", 3);
+                
+                // 将原始文本移动到新组中
+                d3.select(this).remove();
+                textGroup.append("text")
+                    .attr("x", d3.polygonCentroid(d)[0])
+                    .attr("y", d3.polygonCentroid(d)[1])
+                    .attr("text-anchor", "middle")
+                    .attr("dominant-baseline", "middle")
+                    .attr("fill", "#fff")
+                    .attr("font-size", "16px")
+                    .attr("font-weight", "bold")
+                    .text(d.site.originalObject.data.originalData.name);
+            }
+        });
+    
+    // 添加值标签
+    cells.append("text")
+        .attr("x", d => d3.polygonCentroid(d)[0])
+        .attr("y", d => d3.polygonCentroid(d)[1] + 35) // 进一步下移值标签
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#fff")
+        .attr("fill-opacity", 0.7)
+        .attr("font-size", "14px")
+        .text(d => format(d.site.originalObject.data.originalData.weight))
+        .each(function(d) {
+            // 计算多边形的边界框
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            d.forEach(point => {
+                minX = Math.min(minX, point[0]);
+                minY = Math.min(minY, point[1]);
+                maxX = Math.max(maxX, point[0]);
+                maxY = Math.max(maxY, point[1]);
+            });
+            
+            const boxWidth = maxX - minX;
+            const boxHeight = maxY - minY;
+            
+            // 检查文本是否适合单元格
+            const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+            
+            if (textWidth > boxWidth * 0.8 || boxHeight < 40) {
+                // 如果文本太长或单元格太小，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/treemap/voronoi_treemap_rectangle_03.js

@@ -0,0 +1,331 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Voronoi Treemap(Rectangle)",
+    "chart_name": "voronoi_treemap_rectangle_03",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 40], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "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 || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const initialMargin = { // 初始边距，图例将影响顶边距
+        top: variables.margin?.top ?? 10, 
+        right: variables.margin?.right ?? 10, 
+        bottom: variables.margin?.bottom ?? 10, 
+        left: variables.margin?.left ?? 10 
+    };
+    
+    // 创建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; font: 10px sans-serif;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // chartWidth is needed for legend wrapping calculation
+    const chartWidth = width - initialMargin.left - initialMargin.right;
+    
+    // 准备数据 (This processedData and colorScale are used by the *correct* chart logic later)
+    const processedData = chartData.map(d => ({
+        name: d[categoryField],
+        weight: d[valueField]
+    }));
+    
+    const colorScale = d => {
+        if (colorResolver.field(d, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(d, 0, { fallbackKey: "primary" }).value;
+        }
+        const localUniqueCategories = [...new Set(chartData.map(d => d[categoryField]))]; // Use local var to avoid conflict if uniqueCategories is defined globally for legend
+        return chartUtils.color.palette(localUniqueCategories.indexOf(d), { palette: "tableau10" });
+    };
+
+    // ---------- 新增图例 (uniqueCategories is defined here for legend) ----------
+    const uniqueCategories = [...new Set(chartData.map(d => d[categoryField]))];
+
+    // 辅助函数：使用 canvas 估算文本宽度
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    function getTextWidthHelper(text, fontFamily, fontSize, fontWeight) {
+        ctx.font = `${fontWeight || 'normal'} ${fontSize}px ${fontFamily || 'Arial'}`;
+        return chartUtils.text.contextWidth(ctx, text);
+    }
+
+    // ---------- 图例计算与布局 (在主图表布局之前) ----------
+    let legendBlockHeight = 0;
+    const legendLines = [];
+    const paddingBelowLegendToChart = 15; 
+    const minSvgGlobalTopPadding = 10; // SVG顶部到图例顶部的最小间距
+    let legendItemMaxHeight = 0; // 将在下面计算
+    let interLineVerticalPadding = parseFloat(typography.label?.line_spacing || '6'); // 图例行间距，移到外部并提供默认值
+    let legendInterItemSpacing = 10; // 默认的图例项间距，移到外部
+
+    if (uniqueCategories && uniqueCategories.length > 0 && images) { // 确保images已定义
+        const legendColorRectWidth = 12;
+        const legendColorRectHeight = 12;
+        const legendIconWidth = typography.label?.icon_size || 16; 
+        const legendIconHeight = typography.label?.icon_size || 16;
+        const legendPaddingRectIcon = 4; 
+        const legendPaddingIconText = 4; 
+        
+        const legendFontFamily = typography.label?.font_family || 'Arial';
+        const legendFontSize = parseFloat(typography.label?.font_size || '12');
+        const legendFontWeight = typography.label?.font_weight || 'normal';
+
+        legendItemMaxHeight = Math.max(legendColorRectHeight, legendIconHeight, legendFontSize);
+        interLineVerticalPadding = parseFloat(typography.label?.line_spacing || '6');
+
+
+        const legendItemsData = uniqueCategories.map(catName => {
+            const text = String(catName);
+            const color = colorScale(catName);
+            const iconUrl = images.field && images.field[catName] ? images.field[catName] : null;
+            const textWidth = getTextWidthHelper(text, legendFontFamily, legendFontSize, legendFontWeight);
+            
+            let itemVisualWidth = legendColorRectWidth;
+            if (iconUrl) {
+                itemVisualWidth += legendPaddingRectIcon + legendIconWidth + legendPaddingIconText;
+            } else {
+                itemVisualWidth += legendPaddingRectIcon; 
+            }
+            itemVisualWidth += textWidth;
+
+            return { text, color, iconUrl, textWidth, visualWidth: itemVisualWidth };
+        });
+
+        const legendLayout = chartUtils.legend.wrapItems(
+            legendItemsData.map(item => ({ ...item, width: item.visualWidth, height: legendItemMaxHeight })),
+            {
+                maxWidth: chartWidth,
+                itemGap: legendInterItemSpacing,
+                rowGap: interLineVerticalPadding,
+                itemHeight: legendItemMaxHeight,
+            }
+        );
+        legendLines.push(...legendLayout.rows.map(row => ({
+            items: row.items,
+            totalVisualWidth: row.width,
+        })));
+        legendBlockHeight = legendLayout.height;
+    }
+
+    // ---------- 根据图例调整边距和图表尺寸 ----------
+    let effectiveMarginTop;
+    let legendStartY = minSvgGlobalTopPadding; // 图例将从这里开始绘制Y坐标
+
+    if (legendBlockHeight > 0) {
+        // 图例存在，主图表内容在其下方
+        effectiveMarginTop = legendStartY + legendBlockHeight + paddingBelowLegendToChart;
+    } else {
+        // 没有图例，使用初始上边距或最小上边距
+        effectiveMarginTop = Math.max(initialMargin.top, minSvgGlobalTopPadding);
+    }
+    
+    // 现在计算主绘图区域的 chartHeight
+    const chartHeight = height - effectiveMarginTop - initialMargin.bottom;
+
+    if (chartHeight <= 0) {
+        console.warn("Voronoi Treemap: Chart height is not positive after accommodating legend and margins. SVG might be too short.");
+        // You might want to stop execution or display an error if chartHeight is not positive
+        // For example: 
+        // d3.select(containerSelector).html("<p style='color:red;'>Error: Not enough height for the chart and legend.</p>");
+        // return null; // Or svg.node() if you still want to return an empty SVG
+    }
+    
+    // ---------- 绘制图例 (如果存在) ----------
+    if (legendBlockHeight > 0 && legendLines.length > 0) {
+        const legendContainerGroup = svg.append("g")
+            .attr("class", "custom-legend-container")
+            .attr("transform", `translate(0, ${legendStartY})`); // 图例容器的Y偏移
+
+        let currentLineBaseY = 0; // Y坐标相对于 legendContainerGroup
+        
+        // 在图例绘制作用域内重新获取或确认常量值，以确保它们是可用的
+        const currentLegendInterItemSpacing = legendInterItemSpacing; // 使用已在外部定义的 legendInterItemSpacing
+
+        legendLines.forEach((line) => {
+            // 每行在 chartWidth 内水平居中，因此X起始位置需要加上 initialMargin.left
+            const lineRenderStartX = initialMargin.left + (chartWidth - line.totalVisualWidth) / 2;
+            const lineCenterY = currentLineBaseY + legendItemMaxHeight / 2;
+            let currentItemDrawX = lineRenderStartX;
+            
+            const legendColorRectWidth = 12; // 从外部作用域或重新定义
+            const legendColorRectHeight = 12;
+            const legendIconWidth = typography.label?.icon_size || 16;
+            const legendIconHeight = typography.label?.icon_size || 16;
+            const legendPaddingRectIcon = 4;
+            const legendPaddingIconText = 4;
+            const legendFontFamily = typography.label?.font_family || 'Arial';
+            const legendFontSize = parseFloat(typography.label?.font_size || '12');
+            const legendFontWeight = typography.label?.font_weight || 'normal';
+
+
+            line.items.forEach((item, itemIndex) => {
+                legendContainerGroup.append("rect")
+                    .attr("x", currentItemDrawX)
+                    .attr("y", currentLineBaseY + (legendItemMaxHeight - legendColorRectHeight) / 2)
+                    .attr("width", legendColorRectWidth)
+                    .attr("height", legendColorRectHeight)
+                    .attr("fill", item.color)
+                    .attr("fill-opacity", 0.85);
+                currentItemDrawX += legendColorRectWidth;
+
+                if (item.iconUrl) {
+                    currentItemDrawX += legendPaddingRectIcon;
+                    legendContainerGroup.append("image")
+                        .attr("xlink:href", item.iconUrl)
+                        .attr("x", currentItemDrawX)
+                        .attr("y", currentLineBaseY + (legendItemMaxHeight - legendIconHeight) / 2)
+                        .attr("width", legendIconWidth)
+                        .attr("height", legendIconHeight)
+                        .attr("preserveAspectRatio", "xMidYMid meet");
+                    currentItemDrawX += legendIconWidth;
+                    currentItemDrawX += legendPaddingIconText;
+                } else {
+                    currentItemDrawX += legendPaddingRectIcon; 
+                }
+                
+                legendContainerGroup.append("text")
+                    .attr("x", currentItemDrawX)
+                    .attr("y", lineCenterY)
+                    .attr("dominant-baseline", "middle")
+                    .style("font-family", legendFontFamily)
+                    .style("font-size", `${legendFontSize}px`)
+                    .style("font-weight", legendFontWeight)
+                    .style("fill", colorResolver.text({ fallback: "#333333" }).value || typography.label?.font_color || "#333333")
+                    .text(item.text);
+                
+                currentItemDrawX += item.textWidth; 
+                
+                if (itemIndex < line.items.length - 1) {
+                     currentItemDrawX += (line.items[itemIndex+1].visualWidth > 0 ? (currentLegendInterItemSpacing || 10) : 0) ; // 使用在当前作用域确认的 currentLegendInterItemSpacing
+                }
+            });
+            currentLineBaseY += legendItemMaxHeight + interLineVerticalPadding;
+        });
+    }
+
+    // ---------- 创建主图表绘图区域 (g) ----------
+    const g = svg.append("g")
+        .attr("transform", `translate(${initialMargin.left}, ${effectiveMarginTop})`);
+
+    // 定义裁剪多边形（矩形）- 使用计算后的 chartWidth 和 chartHeight
+    const clip = [
+        [0, 0],
+        [0, chartHeight],
+        [chartWidth, chartHeight],
+        [chartWidth, 0]
+    ];
+    
+    // 创建 Voronoi Map 模拟
+    const simulation = d3.voronoiMapSimulation(processedData)
+        .weight(d => d.weight)
+        .clip(clip)
+        .stop();
+    
+    // 运行模拟直到结束
+    let state = simulation.state();
+    while (!state.ended) {
+        simulation.tick();
+        state = simulation.state();
+    }
+    
+    // 获取最终的多边形
+    const polygons = state.polygons;
+    
+    // 绘制多边形
+    const cells = g.selectAll("g")
+        .data(polygons)
+        .enter()
+        .append("g");
+    
+    // 添加单元格
+    cells.append("path")
+        .attr("d", d => {
+            return "M" + d.join("L") + "Z";
+        })
+        .attr("fill", d => colorScale(d.site.originalObject.data.originalData.name))
+        .attr("fill-opacity", 0.8)
+        .attr("stroke", "none");
+    
+    // 为每个单元格添加工具提示 (格式化函数)
+    const format = value => chartUtils.format.autoText(+value);
+    
+    // 修改值标签，使其成为单元格中唯一的主要文本
+    cells.append("text")
+        .attr("class", "value-label-cell")
+        .attr("x", d => d3.polygonCentroid(d)[0])
+        .attr("y", d => d3.polygonCentroid(d)[1]) // 居中Y
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle") // 垂直居中
+        .attr("fill",  "#ffffff") // 使用主题或默认白色
+        .attr("font-size", typography.label?.font_size || "16px") // 字体稍大
+        .attr("font-weight", typography.label?.font_weight || "bold") // 加粗
+        .text(d => format(d.site.originalObject.data.originalData.weight))
+        .each(function(d) {
+            // 计算多边形的边界框
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            d.forEach(point => {
+                minX = Math.min(minX, point[0]);
+                minY = Math.min(minY, point[1]);
+                maxX = Math.max(maxX, point[0]);
+                maxY = Math.max(maxY, point[1]);
+            });
+            
+            const boxWidth = maxX - minX;
+            const boxHeight = maxY - minY;
+            
+            // 检查文本是否适合单元格
+            const textSelection = d3.select(this);
+                const textWidth = chartUtils.text.measure(null, this.textContent || "", {
+                    fontFamily: "sans-serif",
+                    fontSize: parseFloat(textSelection.attr("font-size")) || 12,
+                    fontWeight: textSelection.attr("font-weight") || "normal"
+                }).width;
+            const textHeight = parseFloat(this.getAttribute("font-size")); // 获取字体大小
+
+            if (textWidth > boxWidth * 0.9 || textHeight > boxHeight * 0.8) { // 检查宽度和高度
+                // 如果文本太长或太高，隐藏它
+                d3.select(this).style("display", "none");
+            }
+        });
+
+    return svg.node();
+}