modules/chart_engine/template/d3-js/scatterplot/grouped_scatterplot_03.js

/*
REQUIREMENTS_BEGIN
{
    "chart_type": "Grouped Scatterplot",
    "chart_name": "grouped_scatterplot_03",
    "required_fields": ["x", "y", "y2", "group"],
    "required_fields_type": [["categorical"], ["numerical"], ["numerical"], ["categorical"]],
    "required_fields_range": [[8, 150], [0, "inf"], [0, "inf"], [2, 6]],
    "required_fields_icons": [],
    "required_other_icons": [],
    "required_fields_colors": ["group"],
    "required_other_colors": ["primary"],
    "hierarchy": ["group"],
    "supported_effects": ["shadow", "radius_corner"],
    "min_height": 750,
    "min_width": 750,
    "background": "no",
    "icon_mark": "none",
    "icon_label": "none",
    "has_x_axis": "yes",
    "has_y_axis": "yes"
}
REQUIREMENTS_END
*/

function makeChart(containerSelector, data) {
    // Extract data
    const jsonData = data;
    const chartData = jsonData.data.data;
    const variables = jsonData.variables;
    const typography = jsonData.typography;
    const dataColumns = chartUtils.schema.columns(jsonData);
    const images = jsonData.images || {};
    const colors = jsonData.colors;
    const colorResolver = chartUtils.color.resolver(jsonData);
    
    // Clear container
    d3.select(containerSelector).html("");
    
    // Get field names
    const xField = chartUtils.schema.columnField(dataColumns, 0);
    const yField = chartUtils.schema.columnField(dataColumns, 1);
    const y2Field = chartUtils.schema.columnField(dataColumns, 2);
    const groupField = chartUtils.schema.channel(jsonData, "group", { fallbackKey: "" }).key;
    // Set dimensions and margins
    const width = variables.width;
    const height = variables.height;
    const margin = { top: 25, right: 25, bottom: 50, left: 50 };
    
    // Create SVG
    const svg = d3.select(containerSelector)
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
    
    // Create chart area
    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})`);
    
    // Create scales
    const xExtent = d3.extent(chartData, d => +d[yField]);
    const yExtent = d3.extent(chartData, d => +d[y2Field]);
    
    // 检查数据是否包含负值或0值
    function hasNegativeOrZeroValues(data, field) {
        return data.some(d => d[field] <= 0);
    }
    
    // 判断数据分布是否不均匀
    function isDistributionUneven(data, field) {
        const values = data.map(d => d[field]);
        const extent = d3.extent(values);
        const range = extent[1] - extent[0];
        const median = d3.median(values);
        const q1 = d3.quantile(values.sort(d3.ascending), 0.25);
        const q3 = d3.quantile(values.sort(d3.ascending), 0.75);
        const iqr = q3 - q1;
        
        // 不均匀分布的判断标准
        return range > iqr * 3 || Math.abs(median - (extent[0] + extent[1])/2) > range * 0.2;
    }
    
    // 为X轴创建合适的比例尺
    const xHasNegativeOrZero = hasNegativeOrZeroValues(chartData, yField);
    const xIsUneven = isDistributionUneven(chartData, yField);
    
    const xScale = (!xHasNegativeOrZero && xIsUneven) 
        ? d3.scaleLog()
            .domain([Math.max(xExtent[0] * 0.9, 0.1), xExtent[1] * 1.1])
            .range([0, chartWidth])
        : d3.scaleLinear()
            .domain([xExtent[0] - (xExtent[1] - xExtent[0]) * 0.1, xExtent[1] + (xExtent[1] - xExtent[0]) * 0.1])
            .range([0, chartWidth]);
            
    // 为Y轴创建合适的比例尺
    const yHasNegativeOrZero = hasNegativeOrZeroValues(chartData, y2Field);
    const yIsUneven = isDistributionUneven(chartData, y2Field);
    
    const yScale = (!yHasNegativeOrZero && yIsUneven)
        ? d3.scaleLog()
            .domain([Math.max(yExtent[0] * 0.9, 0.1), yExtent[1] * 1.1])
            .range([chartHeight, 0])
        : d3.scaleLinear()
            .domain([yExtent[0] - (yExtent[1] - yExtent[0]) * 0.1, yExtent[1] + (yExtent[1] - yExtent[0]) * 0.1])
            .range([chartHeight, 0]);
    
    // Create axes
    const xAxis = d3.axisBottom(xScale)
        .tickSize(0)
        .tickPadding(10)
        .tickFormat(d => chartUtils.format.number(d).text);
        
    const yAxis = d3.axisLeft(yScale)
        .tickSize(0)
        .tickPadding(10)
        .tickFormat(d => chartUtils.format.number(d).text);
    
    // Add X axis
    const xAxisGroup = g.append("g")
        .attr("class", "axis x-axis")
        .attr("transform", `translate(0, ${chartHeight})`)
        .call(xAxis)

    xAxisGroup
        .selectAll("path")
        .style("stroke", colorResolver.text({ fallback: "#333333" }).value)
        .style("stroke-width", 1)
        .style("opacity", 0.5)

    xAxisGroup
        .selectAll("text")
        .style("color", colorResolver.text({ fallback: "#333333" }).value)
        
    // Add Y axis
    const yAxisGroup = g.append("g")
        .attr("class", "axis y-axis")
        .call(yAxis)
        .style("color", colorResolver.text({ fallback: "#333333" }).value)
        .style("fill", "black");

    yAxisGroup
        .selectAll("path")
        .style("stroke", colorResolver.text({ fallback: "#333333" }).value)
        .style("stroke-width", 1)
        .style("opacity", 0.5)

    yAxisGroup
        .selectAll("text")
        .style("color", colorResolver.text({ fallback: "#333333" }).value)
    
    // Add axis titles
    g.append("text")
        .attr("class", "axis-title")
        .attr("x", chartWidth)
        .attr("y", chartHeight + margin.bottom / 2 + 15)
        .attr("text-anchor", "end")
        .attr("font-size", 13)
        .text(yField);
        
    g.append("text")
        .attr("class", "axis-title")
        .attr("transform", "rotate(-90)")
        .attr("x", -margin.top)
        .attr("y", -margin.left / 2 - 10)
        .attr("text-anchor", "end")
        .attr("font-size", 13)
        .text(y2Field);
    
    // Create tooltip
    const tooltip = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
    // Helper function to find optimal label position
    function findOptimalPosition(d, allPoints, currentPositions = {}) {
        const positions = [
            { x: 20, y: 4, anchor: "start", priority: 1 },         // right
            { x: 0, y: -20, anchor: "middle", priority: 2 },       // top
            { x: -20, y: 4, anchor: "end", priority: 3 },          // left
            { x: 0, y: 28, anchor: "middle", priority: 4 },        // bottom
            { x: 20, y: -20, anchor: "start", priority: 5 },       // top-right
            { x: -20, y: -20, anchor: "end", priority: 6 },        // top-left
            { x: -20, y: 28, anchor: "end", priority: 7 },         // bottom-left
            { x: 20, y: 28, anchor: "start", priority: 8 }         // bottom-right
        ];

        const pointX = xScale(+d[yField]);
        const pointY = yScale(+d[y2Field]);

        // 如果已经有位置分配，直接返回
        if (currentPositions[d[xField]]) {
            return currentPositions[d[xField]];
        }

        const textBBox = chartUtils.text.measure(g, d[xField], {
            fontFamily: typography.label.font_family,
            fontSize: 10,
        });

        const labelWidth = textBBox.width;
        const labelHeight = textBBox.height;

        // 贪心算法：按优先级顺序尝试每个位置，选择第一个没有重叠的位置
        for (const pos of positions) {
            let hasOverlap = false;

            // 计算标签边界
            let labelX1, labelY1, labelX2, labelY2;

            if (pos.priority === 1) { // right
                labelX1 = pointX + 20;
                labelY1 = pointY - labelHeight / 2;
            } else if (pos.priority === 2) { // top
                labelX1 = pointX - labelWidth / 2;
                labelY1 = pointY - 20 - labelHeight;
            } else if (pos.priority === 3) { // left
                labelX1 = pointX - 20 - labelWidth;
                labelY1 = pointY - labelHeight / 2;
            } else if (pos.priority === 4) { // bottom
                labelX1 = pointX - labelWidth / 2;
                labelY1 = pointY + 20;
            } else if (pos.priority === 5) { // top-right
                labelX1 = pointX + 15;
                labelY1 = pointY - 15 - labelHeight;
            } else if (pos.priority === 6) { // top-left
                labelX1 = pointX - 15 - labelWidth;
                labelY1 = pointY - 15 - labelHeight;
            } else if (pos.priority === 7) { // bottom-left
                labelX1 = pointX - 15 - labelWidth;
                labelY1 = pointY + 15;
            } else { // bottom-right
                labelX1 = pointX + 15;
                labelY1 = pointY + 15;
            }

            labelX2 = labelX1 + labelWidth;
            labelY2 = labelY1 + labelHeight;

            // 检查边界约束
            if (labelX1 < 0 || labelX2 > chartWidth || labelY1 < 0 || labelY2 > chartHeight) {
                continue;
            }

            // 检查与其他点及其标签的重叠
            for (const p of allPoints) {
                if (p === d) continue;

                const pX = xScale(p[yField]);
                const pY = yScale(p[y2Field]);

                // 检查与点的重叠
                const pointRadius = circleRadius; // Use the calculated circleRadius
                const dx = labelX1 + labelWidth/2 - pX;
                const dy = labelY1 + labelHeight/2 - pY;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < pointRadius + Math.sqrt(labelWidth * labelWidth + labelHeight * labelHeight) / 2) {
                    hasOverlap = true;
                    break;
                }

                // 检查与其他标签的重叠
                const pPos = currentPositions[p[xField]];
                if (pPos) {
                    const otherBBox = chartUtils.text.measure(g, p[xField], {
                        fontFamily: typography.label.font_family,
                        fontSize: 10,
                    });

                    let otherX1, otherY1;
                    if (pPos.anchor === "start") {
                        otherX1 = pX + pPos.x;
                        otherY1 = pY + pPos.y - otherBBox.height/2;
                    } else if (pPos.anchor === "middle") {
                        otherX1 = pX + pPos.x - otherBBox.width/2;
                        otherY1 = pY + pPos.y; // Align based on text-anchor: middle baseline
                    } else { // end
                        otherX1 = pX + pPos.x - otherBBox.width;
                        otherY1 = pY + pPos.y - otherBBox.height/2;
                    }
                     const otherX2 = otherX1 + otherBBox.width;
                     const otherY2 = otherY1 + otherBBox.height;

                    if (labelX1 < otherX2 && labelX2 > otherX1 &&
                        labelY1 < otherY2 && labelY2 > otherY1) {
                        hasOverlap = true;
                        break;
                    }
                }
            }

            if (!hasOverlap) {
                return { ...pos, canShow: true };
            }
        }

        // 如果所有位置都有重叠，返回优先级最高的位置，但标记为不显示
        return { ...positions[0], canShow: false };
    }
    // Determine circle size based on number of data points
    const numPoints = chartData.length;
    const circleRadius = numPoints <= 15 ? 15 : Math.max(10, 15 - (numPoints - 15) / 20);
    
    // Add data points
    const points = g.selectAll(".data-point")
        .data(chartData)
        .enter()
        .append("g")
        .attr("class", "data-point")
        .attr("transform", d => `translate(${xScale(+d[yField])}, ${yScale(+d[y2Field])})`);
    
    // Add circles for data points (original style)
    points.append("circle")
        .attr("r", circleRadius)
        .attr("fill", d => colorResolver.field(d[groupField], 0, { fallbackKey: "primary" }).value)
        .style("opacity", 0.75);
    
    // Calculate optimal positions for all labels
    let labelPositions = {};
    chartData.forEach(d => {
        labelPositions[d[xField]] = findOptimalPosition(d, chartData, labelPositions);
    });
    
    // Add labels with optimized positions, only showing non-overlapping ones
    points.append("text")
        .attr("class", "data-label")
        .attr("x", d => labelPositions[d[xField]].x)
        .attr("y", d => labelPositions[d[xField]].y)
        .attr("text-anchor", d => labelPositions[d[xField]].anchor)
        .style("font-family", typography.label.font_family)
        .style("font-size", 10)
        .style("font-weight", typography.label.font_weight)
        .style("opacity", d => labelPositions[d[xField]].canShow ? 1 : 0) // Control visibility based on canShow flag
        .text(d => d[xField]);
    
    // Add interactivity
    points
        .on("mouseover", function(event, d) {
            d3.select(this).select("circle")
                .transition()
                .duration(200)
                .attr("r", circleRadius * 1.5);
                
            d3.select(this).select(".data-label")
                .style("font-weight", "bold");
                
            tooltip.transition()
                .duration(200)
                .style("opacity", 0.9);
            tooltip.html(`<strong>${d[xField]}</strong><br/>${yField}: ${d[yField]}<br/>${y2Field}: ${d[y2Field]}`)
                .style("left", (event.pageX + 10) + "px")
                .style("top", (event.pageY - 20) + "px");
        })
        .on("mouseout", function() {
            d3.select(this).select("circle")
                .transition()
                .duration(200)
                .attr("r", circleRadius);
                
            d3.select(this).select(".data-label")
                .style("font-weight", "normal");
                
            tooltip.transition()
                .duration(500)
                .style("opacity", 0);
        });
    
    // 添加图例
    // 获取分组列表
    const groups = [...new Set(chartData.map(d => d[groupField]))];
    
    // 图例配置参数
    const initialLegendFontSize = parseFloat(typography.label?.font_size || 12);
    const legendFontWeight = typography.label?.font_weight || "normal";
    const legendFontFamily = typography.label?.font_family || "Arial";
    const legendColor = colorResolver.text({ fallback: "#333333" }).value;
    const legendItemPadding = 5; // 标记与文本间距
    const legendColumnPadding = 20; // 图例项间距
    const legendMinimumFontSize = 9; // 最小图例字体大小
    const legendRowPadding = 15; // 图例行间距
    
    if (groups.length > 0) {
        const legendFontSize = parseFloat(typography.label?.font_size || 12);
        const legendFontWeight = typography.label?.font_weight || "normal";
        const legendFontFamily = typography.label?.font_family || "Arial";
        const legendColor = colorResolver.text({ fallback: "#333333" }).value;
        const baseWidth = (typeof chartWidth === "number" ? chartWidth : innerWidth);
        const legendWidth = baseWidth * 0.9;
        const legendCenterX = margin.left + baseWidth / 2;
        const legendY = margin.top / 2;

        if (typeof groupField === "string" && groupField.length > 0) {
            svg.append("text")
                .attr("class", "legend-title")
                .attr("x", legendCenterX)
                .attr("y", legendY - (legendFontSize + 6))
                .attr("text-anchor", "middle")
                .style("font-family", legendFontFamily)
                .style("font-size", `${legendFontSize + 1}px`)
                .style("font-weight", "bold")
                .style("fill", legendColor)
                .text(groupField);
        }

        chartUtils.legend.centered(svg, groups, {
            colorScale,
            colorResolver,
            colors,
        }, legendCenterX, legendY, {
            markerShape: "circle",
            markerSize: pointRadius * 2,
            labelGap: 5,
            itemGap: 20,
            rowGap: 15,
            maxWidth: legendWidth,
            fitToWidth: true,
            minFontSize: 9,
            fontSize: legendFontSize,
            fontFamily: legendFontFamily,
            fontWeight: legendFontWeight,
            textColor: legendColor,
        });
    }
    
    return svg.node();
}