d3.js绘制单/多面板组合箱线图

用d3.js研发了个可以单面板、多面板展示的组合箱线图；

组合箱线图中包括普通散点、蜂群散点、小提琴图、小提琴箱线图、柱状图、误差棒、离群点等等，其中大部分你能想到的配置都是自行传参调整的，你想不到的也能稍作修改然后自行调整，上代码：

import * as d3 from "d3";
import { dispersedColorList } from "@/utils/commonData";
import { calc_bee_swarm_plot } from "@/utils/plot_helper";const CombinationBoxPlot = (options = {}) => {let data = options.data.plot_data;if (!data) return;let pValues = options.data.pValues;// 绘制显著性标记最大总和const metricSums = {};data.forEach((item) => {const metric = item.metric;const comparisonsLength = item.comparisons ? item.comparisons.length : 0;metricSums[metric] = (metricSums[metric] || 0) + comparisonsLength;});let maxSum = 0; //最大总和for (const metric in metricSums) {if (metricSums[metric] > maxSum) {maxSum = metricSums[metric];}}let chartHeight = options.params.isSmallTitle? 140 * (options.params.height / 100) + maxSum * 30: 400 * (options.params.height / 100) + maxSum * 30,chartWidth = options.params.isSmallTitle? 200 * (options.params.width / 100): 600 * (options.params.width / 100);// 获取标签样式function getSvgTextStyle({text = "",fontSize = 14,fontFamily = "Arial",fontWeight = "normal"} = {}) {const svg = d3.select("body").append("svg").attr("class", "get-svg-text-style");const textStyle = svg.append("text").text(text).attr("font-size", fontSize).attr("font-family", fontFamily).attr("font-weight", fontWeight).node().getBBox();svg.remove();return {width: textStyle.width,height: textStyle.height};}// 获取线性坐标轴宽高function getSvgBandAxisStyle({fontSize = 20,orient = "bottom",fontFamily = "Arial",fontWeight = "normal",rotate = 0,domain = ["A", "B", "C"],range = [0, 200]} = {}) {let axis;let svg = d3.select("body").append("svg").attr("width", 200).attr("height", 100).attr("transform", "translate(300, 200)").attr("class", "get-svg-axis-style");let scale = d3.scaleBand().domain(domain).range(range);if (orient === "bottom" || orient === "top") {axis = d3.axisBottom(scale);} else {axis = d3.axisLeft(scale);}let axisStyle = svg.append("g").call(axis).call((g) => {g.selectAll("text").attr("fill", "#555").attr("font-size", fontSize).attr("font-family", fontFamily).attr("font-weight", fontWeight).attr("tmpY",g.select("text").attr("tmpY") || g.select("text").attr("dy")).attr("dy",rotate > 70 && rotate <= 90? "0.35em": rotate >= -90 && rotate < -70? "0.4em": g.select("text").attr("tmpY")).attr("text-anchor",orient === "left"? "end": rotate? rotate > 0? "start": "end": "middle").attr("transform",`translate(0, 0) ${rotate ? `rotate(${rotate} 0 ${g.select("text").attr("y")})` : ""}`);}).node().getBBox();svg.remove();return {width: axisStyle.width,height: axisStyle.height};}// 动态计算星号function getStars(p) {if (p === 0) return "***";if (p < 0.001) return "***";else if (p < 0.01) return "**";else if (p < 0.05) return "*";else return "";}// 配置参数let {margin = { top: 30, right: 20, bottom: 40, left: 50 },panelsPerRow = 3, //每行放几个boxHeightRatio = 0.7,background = "#f0f0f0",panel_title = 12,plotAreaBg = "white",areaBgOpacity = 1,isBorder = true,isSmallTitle = true, //小标题和右边框 不给调boxPlotOpacity = 0.5,grid = false,meanValue = false,meanDot = 2,meanColor = "#ff0000",lineSpacing = 8, // 显著性标记线间距isdot = false, //散点dotType = "scatter",centrifugal = false,scatter = true,dotRadius = 1,beaswarm = true,beamDotRadius = 0.5,isError = true, //柱状图误差线showBoxPlots = true, // 显示箱线图borderSelect = "fill",boxPlotSingle = "#f0f0f0",borderWidth = 1,showViolins = true, // 显示小提琴图violinWidth = 0.9, //小提琴宽度 不给调violinOpacity = 0.5,violinStrokeWidth = 1,showBars = false, // 显示柱状图barWidthRatio = 1, // 柱状图宽度比例barOpacity = 0.7,errorType = "error",errorLineColor = "#333", // 误差线颜色errorLineWidth = 1, // 误差线宽度isLine = false,x_title = "",x_title_color = "#000",x_title_font = "Arial",x_title_size = 14,x_text_rotate = 90,x_text_color = "#000000",x_text_size = 12,x_text_font = "Arial",y_title = "",y_title_color = "#000",y_title_font = "Arial",y_title_size = 14,y_text_color = "#000000",y_text_size = 12,y_text_font = "Arial",main_title = "",main_title_color = "#000",main_title_font = "Arial",main_title_size = 14,panel_title_font = "Arial",panel_title_size = 10,panel_title_color = "#000000",legend_title = "",legend_title_color = "#000",legend_title_size = 14,legend_title_font = "Arial",legend_text_color = "#000000",legend_text_font = "Arial",legend_text_size = 12} = options.params;x_text_rotate = -x_text_rotate;let colors = dispersedColorList[options.params.color];if (options.params.type == "boxPlot") {showBoxPlots = true;showViolins = false;showBars = false;} else if (options.params.type == "violin") {showBoxPlots = true;showViolins = true;showBars = false;isdot = false;scatter = false;beaswarm = false;} else {showBoxPlots = false;showViolins = false;showBars = true;}if (options.params.isdot) {if (options.params.dotType == "scatter") {scatter = true;beaswarm = false;} else {scatter = false;beaswarm = true;}} else {scatter = false;beaswarm = false;}const box = document.querySelector(options.container);if (!box || !options.data.plot_data) return;// 计算布局参数const metrics = [...new Set(data.map((d) => d.metric))];// 处理数据分组const dataByMetric = d3.group(data, (d) => d.metric);// 计算XY轴的domainconst allGroups = [...new Set(metrics.flatMap((metric) => dataByMetric.get(metric).map((d) => d.group)))];const xDomain = allGroups;// const dataYDomain = options.data.yDomain;// let yDomain = {};// for (const key in dataYDomain) {//   const [min, max] = dataYDomain[key];//   yDomain[key] = [min - Math.abs(min * 0.3), max + Math.abs(max * 0.8)];// }const dataYDomain = options.data.yDomain;// 计算各指标原始数据范围const metricRanges = {};Object.entries(dataYDomain).forEach(([metric, [min, max]]) => {metricRanges[metric] = max - min;});// 计算全量指标的平均范围（用于归一化）const allRanges = Object.values(metricRanges);const avgRange = d3.mean(allRanges);// 动态计算每个指标的上界扩展系数const yDomain = {};Object.entries(dataYDomain).forEach(([metric, [min, max]]) => {// 当前指标的特性const range = metricRanges[metric];// 计算两个影响因子（均归一化到0-1区间）const rangeFactor = range / avgRange; // 范围因子（>1表示大范围）const comparisonFactor = Math.min(maxSum / 5, 1); // 比较次数因子（5次为基准）// 动态系数公式（可调参数）const baseCoefficient = 0.4; // 基础扩展比例const rangeWeight = 0.3; // 范围影响的权重const comparisonWeight = 0.3; // 比较次数影响的权重// 合成最终系数let dynamicCoefficient =baseCoefficient +rangeFactor * rangeWeight +comparisonFactor * comparisonWeight;// 限制系数范围（0.4-0.8）dynamicCoefficient = Math.min(Math.max(dynamicCoefficient, 0.3), 0.8);// 应用扩展计算yDomain[metric] = [min - Math.abs(min * 0.3),max + Math.abs(max * dynamicCoefficient)];});let mainTitleH = getSvgTextStyle({text: main_title,fontSize: main_title_size,fontFamily: main_title_font}).height;mainTitleH = main_title ? mainTitleH + 10 : 0;const xTitleH = getSvgTextStyle({text: x_title,fontSize: x_title_size,fontFamily: x_title_font}).height;const xAxisH = getSvgBandAxisStyle({fontSize: x_text_size,fontFamily: x_text_font,rotate: x_text_rotate,domain: xDomain}).height;//   const yTitleH = getSvgTextStyle({//     text: y_title,//     fontSize: y_title_size,//     fontFamily: y_title_font//   }).height;//   const yAxisW = getSvgBandAxisStyle({//     fontSize: y_text_size,//     fontFamily: y_text_font,//     domain: yDomain,//     orient: "left"//   }).width;const chartsPerRow = panelsPerRow? Math.min(panelsPerRow, metrics.length): Math.floor(window.innerWidth / chartWidth);// 图例字符串最长const maxLength = data.reduce((max, item) => Math.max(max, item.group.length),0);const legendWidth = 100 + maxLength * 15;const totalWidth = chartsPerRow * chartWidth + legendWidth;const rows = Math.ceil(metrics.length / chartsPerRow);const totalHeight = rows * (chartHeight + xAxisH) + mainTitleH;!d3.select(options.container).select("svg").empty() &&d3.select(options.container).select("svg").remove();const svg = d3.select(options.container).append("svg").attr("width", totalWidth).attr("height", totalHeight).attr("id", "combination-boxPlot");// 主标题svg.append("text").attr("class", "main-title").attr("x",isSmallTitle? (totalWidth - legendWidth) / 2: (totalWidth - legendWidth + margin.left) / 2).attr("y", mainTitleH) // 垂直居中.text(main_title).attr("text-anchor", "middle").attr("font-family", main_title_font).attr("font-size", main_title_size).attr("fill", main_title_color);const chartVerticalOffset = mainTitleH + 25;metrics.forEach((metric, index) => {const metricData = dataByMetric.get(metric);const row = Math.floor(index / chartsPerRow);const col = index % chartsPerRow;// 计算当前图表的偏移量const xOffset = col * chartWidth;const yOffset = row * (chartHeight + xAxisH) + chartVerticalOffset;// 创建图表容器const chart = svg.append("g").attr("transform", `translate(${xOffset},${yOffset})`);// 添加标题背景const titleWidth = isSmallTitle? chartWidth - margin.left - margin.right: 0;chart.append("rect").attr("class", "title-background").attr("x", margin.left).attr("y", 0).attr("width", titleWidth).attr("height", 30).style("fill", background).style("stroke", "#000").style("stroke-width", "1px").style("stroke-top", "1px").style("stroke-left", "1px").style("stroke-right", "1px");// 添加标题if (isSmallTitle) {chart.append("text").attr("class", "chart-title").attr("x", margin.left + titleWidth / 2).attr("y", 20).text(metric).attr("font-family", panel_title_font).attr("font-size", panel_title_size).attr("fill", panel_title_color).style("text-anchor", "middle");}// 箱线图区域高度const plotHeight = chartHeight * boxHeightRatio;if (!isSmallTitle) {margin.left = 100;// 添加右边框线chart.append("line").attr("x1", chartWidth - margin.right).attr("y1", margin.top).attr("x2", chartWidth - margin.right).attr("y2", margin.top + plotHeight).style("stroke", "#000").style("stroke-width", "1px");// 添加上边框线chart.append("line").attr("x1", margin.left).attr("y1", margin.top).attr("x2", chartWidth - margin.right).attr("y2", margin.top).style("stroke", "#000").style("stroke-width", "1px");// 添加X轴标题chart.append("text").attr("class", "x-axis-title").attr("x", margin.left + (chartWidth - margin.left - margin.right) / 2).attr("y", margin.top + plotHeight + margin.bottom + 15).text(x_title).attr("text-anchor", "middle").attr("font-family", x_title_font).attr("font-size", x_title_size).attr("fill", x_title_color);// 添加Y轴标题chart.append("text").attr("class", "y-axis-title").attr("x", -margin.top - plotHeight / 2).attr("y", margin.left / 2 - 15).text(y_title).attr("text-anchor", "middle").attr("transform", "rotate(-90)").attr("font-family", y_title_font).attr("font-size", y_title_size).attr("fill", y_title_color);}// 创建比例尺const xScale = d3.scaleBand().domain(xDomain).range([margin.left, chartWidth - margin.right]).padding(0.2);let metricYDomain = yDomain[metric];const yScale = d3.scaleLinear().domain(metricYDomain).range([plotHeight, 0]);// const yScale = d3.scaleLinear().domain(yDomain).range([plotHeight, 0]);// 绘制区域背景chart.append("rect").attr("x", margin.left).attr("y", margin.top).attr("width", titleWidth).attr("height", plotHeight).style("fill", plotAreaBg).style("opacity", areaBgOpacity);// 网格线if (grid) {chart.selectAll(".y-grid").data(yScale.ticks()).enter().append("line").attr("class", "y-grid").attr("x1", margin.left).attr("x2", chartWidth - margin.right).attr("y1", (d) => margin.top + yScale(d)).attr("y2", (d) => margin.top + yScale(d)).style("stroke", "rgba(0, 0, 0, 0.2)").style("stroke-opacity", 1).style("stroke-width", 0.5);chart.selectAll(".x-grid").data(xScale.domain()).enter().append("line").attr("class", "x-grid").attr("x1", (d) => xScale(d) + xScale.bandwidth() / 2).attr("x2", (d) => xScale(d) + xScale.bandwidth() / 2).attr("y1", margin.top).attr("y2", margin.top + plotHeight).style("stroke", "rgba(0, 0, 0, 0.2)").style("stroke-opacity", 1).style("stroke-width", 0.5);}// 添加绘图边框if (isBorder) {chart.append("rect").attr("x", margin.left).attr("y", margin.top).attr("width", titleWidth).attr("height", plotHeight).style("stroke", "#000").style("stroke-width", "1px").style("fill", "none");}// 添加p值let pValueText;if (pValues) {if (pValues[metric] !== false) {pValueText = chart.append("text").attr("class", "p-value").attr("x", (chartWidth + 30) / 2).attr("y", 50).text(`p = ${pValues[metric]}`).style("font-size", "8px").style("fill", "black").style("text-anchor", "middle");}}// 用于收集当前面板所有分组的散点const pointsByName = new Map();// 绘制箱线图if (showBoxPlots) {metricData.forEach((d, i) => {const [min, q1, median, q3, max] = d.boxplot;const center = xScale(d.group) + xScale.bandwidth() / 2;const color = colors[i % colors.length];const boxWidth = showViolins? xScale.bandwidth() * 0.3: xScale.bandwidth() * 0.8;const boxOffset = (xScale.bandwidth() - boxWidth) / 2;// 调用回调函数if (options.onBoxWidthCalculated) {options.onBoxWidthCalculated(boxWidth);}// 箱体chart.append("rect").attr("class", "box").attr("x", xScale(d.group) + boxOffset).attr("y", margin.top + yScale(q3)).attr("width", boxWidth).attr("height", yScale(q1) - yScale(q3)).attr("stroke-width", borderWidth).attr("stroke", borderSelect == "fill" ? color : boxPlotSingle).attr("fill", color).attr("fill-opacity", boxPlotOpacity);chart.append("line").attr("class", "median-line").attr("x1", xScale(d.group) + boxOffset).attr("x2", xScale(d.group) + boxOffset + boxWidth).attr("y1", margin.top + yScale(median)).attr("y2", margin.top + yScale(median)).style("stroke", borderSelect == "fill" ? color : boxPlotSingle).style("opacity", 1).style("stroke-width", "1px");const upperWhiskerLimit = q3 + 1.5 * (q3 - q1);const lowerWhiskerLimit = q1 - 1.5 * (q3 - q1);const upperWhisker = Math.min(max, upperWhiskerLimit);chart.append("line").attr("class", "whisker").attr("x1", center).attr("x2", center).attr("y1", margin.top + yScale(upperWhisker)).attr("y2", margin.top + yScale(q3)).style("stroke", borderSelect == "fill" ? color : boxPlotSingle).style("stroke-width", "1px");const lowerWhisker = Math.max(min, lowerWhiskerLimit);chart.append("line").attr("class", "whisker").attr("x1", center).attr("x2", center).attr("y1", margin.top + yScale(lowerWhisker)).attr("y2", margin.top + yScale(q1)).style("stroke", borderSelect == "fill" ? color : boxPlotSingle).style("stroke-width", "1px");// 绘制显著性标记if (d.comparisons) {// // 找出当前面板中最高的箱子的顶部位置// let maxBoxTop = 0;// metricData.forEach((d) => {//   const boxTop = yScale(d.boxplot[4]); // boxplot[4]是最大值//   if (boxTop < maxBoxTop || maxBoxTop === 0) {//     maxBoxTop = boxTop;//   }// });// // 计算标记的基础Y位置（最高箱子上方30px）// const baseY = margin.top + maxBoxTop - 30;// let lineLevel = 0;const pValueBBox = pValueText.node().getBBox();// 计算基准位置let baseY = 0;if (maxSum > 10) {baseY = pValueBBox.y - 10 + pValueBBox.height * maxSum;} else {baseY = pValueBBox.y + 7 + pValueBBox.height * maxSum;}console.log(baseY);let lineLevel = 0;d.comparisons.forEach((comp) => {const currentGroupCenter = xScale(d.group) + xScale.bandwidth() / 2;const compareGroupCenter = xScale(comp.vs) + xScale.bandwidth() / 2;const stars = getStars(comp.p);if (stars) {// 自动寻找可用层级（冲突检测）let foundLevel = false;while (!foundLevel) {// 检查当前层级是否被占用const existingLines = chart.selectAll(`.level-${lineLevel}`);if (existingLines.empty()) {foundLevel = true;} else {lineLevel++;}}// 计算当前层级的Y坐标，确保不超出面板顶部const currentY = Math.max(margin.top + 10,baseY - lineLevel * lineSpacing);// 绘制连接线chart.append("line").attr("class", `significance-line level-${lineLevel}`).attr("x1", currentGroupCenter).attr("x2", compareGroupCenter).attr("y1", currentY).attr("y2", currentY).style("stroke", "#ff4444").style("stroke-width", 1).style("marker-end", "url(#arrowhead)");// 添加星号chart.append("text").attr("class", "significance-star").attr("x", (currentGroupCenter + compareGroupCenter) / 2).attr("y", currentY + 1.5).text(stars).style("font-size", "10px").style("fill", "#cc0000").style("font-weight", "bold");lineLevel++;}});}// 散点图if (scatter && d.scatter) {const center = xScale(d.group) + xScale.bandwidth() / 2;const bandwidth = xScale.bandwidth();d.scatter.forEach((point) => {// const xPos = center + point.x * (bandwidth / 2); // 计算x坐标const xPos = center + (Math.random() * 1.6 - 0.8) * (bandwidth / 2); // 计算x坐标const yPos = margin.top + yScale(point.y); // 计算y坐标const name = point.name;const group = d.group;if (!pointsByName.has(name)) {pointsByName.set(name, []);}pointsByName.get(name).push({ x: xPos, y: yPos, group });// 绘制散点chart.append("circle").attr("cx", xPos).attr("cy", yPos).attr("r", dotRadius).attr("fill", colors[i % colors.length]); // 使用分组颜色});}// 离群点if (centrifugal && d.scatter) {d.scatter.forEach((point) => {if (lowerWhisker > point.y || upperWhisker < point.y) {// 计算坐标const center = xScale(d.group) + xScale.bandwidth() / 2;const yPos = margin.top + yScale(point.y);chart.append("circle").attr("cx", center).attr("cy", yPos).attr("r", 2).attr("fill", "none").attr("stroke", colors[i % colors.length]).attr("stroke-width", 0.5);}});}// 绘制同名点连接线if (isLine) {pointsByName.forEach((points, name) => {const groups = new Set(points.map((p) => p.group));if (groups.size < 2) return;// 为每个点与其他组的点连线points.forEach((p1, i) => {points.slice(i + 1).forEach((p2) => {if (p1.group !== p2.group) {chart.append("line").attr("class", "scatter-line").attr("x1", p1.x).attr("y1", p1.y).attr("x2", p2.x).attr("y2", p2.y).attr("stroke", "#666").attr("stroke-width", 0.8).attr("opacity", 0.6);}});});});}// 绘制均值点if (meanValue) {const meanValue = d.boxplot[d.boxplot.length - 1]; // 获取最后一个值chart.append("circle").attr("class", "mean-point").attr("cx", center).attr("cy", margin.top + yScale(meanValue)).attr("r", meanDot).attr("fill", meanColor).attr("stroke-width", 1);// .append("title") // 添加tooltip// .text(`Mean: ${meanValue.toFixed(2)}`);}// 蜂群图if (beaswarm && d.scatter) {const center = xScale(d.group) + xScale.bandwidth() / 2;const bandwidth = xScale.bandwidth();// 根据显示类型确定箱体半宽const boxHalfWidth = showViolins? (bandwidth * 0.3) / 2: (bandwidth * 0.8) / 2;const r = beamDotRadius;const beeSwarm = calc_bee_swarm_plot(d.scatter, yScale, r);// console.log(beeSwarm);beeSwarm.forEach((point) => {// 限制x偏移在箱体宽度范围内const clampedX = Math.max(-boxHalfWidth,Math.min(point.x, boxHalfWidth));// const xPos = center + point.x; // 计算x坐标const xPos = center + clampedX; // 计算x坐标const yPos = margin.top + point.y; // 计算y坐标chart.selectAll(".beeswarm-point").data(d.scatter).enter().append("circle").attr("class", "beeswarm").attr("cx", () => {return xPos;}).attr("cy", () => {return yPos;}).attr("r", r).attr("fill", "none").attr("stroke", colors[i % colors.length]);});}});}// 小提琴if (showViolins) {scatter = false;beaswarm = false;metricData.forEach((d, i) => {if (!d.violin) return;const violin = d.violin;const color = colors[i % colors.length];const center = xScale(d.group) + xScale.bandwidth() / 2;const bandwidth = xScale.bandwidth();const violinScale = d3.scaleLinear().domain([0, d3.max(violin.density)]).range([0, (bandwidth * violinWidth) / 2]);const areaGenerator = d3.area().x0((d) => center - violinScale(d)).x1((d) => center + violinScale(d)).y((d, i) => margin.top + yScale(violin.Y[i])).curve(d3.curveCatmullRom);chart.append("path").datum(violin.density).attr("class", "violin").attr("d", areaGenerator).attr("fill", color).attr("fill-opacity", violinOpacity);//   .attr("stroke", color)//   .attr("stroke-width", violinStrokeWidth);});}// 柱状图if (showBars) {metricData.forEach((d, i) => {if (!d.bar) return;const color = colors[i % colors.length];const center = xScale(d.group) + xScale.bandwidth() / 2;const barWidth = xScale.bandwidth() * barWidthRatio;// 绘制柱状图chart.append("rect").attr("class", "bar").attr("x", center - barWidth / 2).attr("y", margin.top + yScale(d.bar.value)).attr("width", barWidth).attr("height", plotHeight - yScale(d.bar.value)).attr("fill", color).attr("opacity", barOpacity);// 绘制误差线if (isError && d.bar.error) {const currentYDomain = yDomain[metric];let errorTop = 0;let errorBottom = 0;if (errorType === "error") {errorTop = Math.min(d.bar.value + d.bar.error, currentYDomain[1]);errorBottom = Math.max(d.bar.value - d.bar.error,currentYDomain[0]);} else {errorTop = Math.min(d.bar.value + d.bar.deviation,currentYDomain[1]);errorBottom = Math.max(d.bar.value - d.bar.deviation,currentYDomain[0]);}// 主误差线chart.append("line").attr("class", "error-line").attr("x1", center).attr("x2", center).attr("y1", margin.top + yScale(errorTop)).attr("y2", margin.top + yScale(errorBottom)).attr("stroke", errorLineColor).attr("stroke-width", errorLineWidth);// 误差线顶部横杠chart.append("line").attr("class", "error-cap").attr("x1", center - barWidth / 5).attr("x2", center + barWidth / 5).attr("y1", margin.top + yScale(errorTop)).attr("y2", margin.top + yScale(errorTop)).attr("stroke", errorLineColor).attr("stroke-width", errorLineWidth);// 误差线底部横杠chart.append("line").attr("class", "error-cap").attr("x1", center - barWidth / 5).attr("x2", center + barWidth / 5).attr("y1", margin.top + yScale(errorBottom)).attr("y2", margin.top + yScale(errorBottom)).attr("stroke", errorLineColor).attr("stroke-width", errorLineWidth);}// 散点图if (scatter && d.scatter) {const center = xScale(d.group) + xScale.bandwidth() / 2;const bandwidth = xScale.bandwidth();d.scatter.forEach((point) => {// const xPos = center + point.x * (bandwidth / 2); // 计算x坐标const xPos = center + (Math.random() * 1.6 - 0.8) * (bandwidth / 2); // 计算x坐标const yPos = margin.top + yScale(point.y); // 计算y坐标chart.append("circle").attr("cx", xPos).attr("cy", yPos).attr("r", dotRadius).attr("fill", colors[i % colors.length]); // 使用分组颜色});}// 蜂群图if (beaswarm && d.scatter) {const center = xScale(d.group) + xScale.bandwidth() / 2;const bandwidth = xScale.bandwidth();// 根据显示类型确定箱体半宽const boxHalfWidth = showViolins? (bandwidth * 0.3) / 2: (bandwidth * 0.8) / 2;const r = beamDotRadius;const beeSwarm = calc_bee_swarm_plot(d.scatter, yScale, r);// console.log(beeSwarm);beeSwarm.forEach((point) => {// 限制x偏移在箱体宽度范围内const clampedX = Math.max(-boxHalfWidth,Math.min(point.x, boxHalfWidth));// const xPos = center + point.x; // 计算x坐标const xPos = center + clampedX; // 计算x坐标const yPos = margin.top + point.y; // 计算y坐标chart.selectAll(".beeswarm-point").data(d.scatter).enter().append("circle").attr("class", "beeswarm").attr("cx", () => {return xPos;}).attr("cy", () => {return yPos;}).attr("r", r).attr("fill", "none").attr("stroke", colors[i % colors.length]);});}// 绘制显著性标记if (d.comparisons) {const pValueBBox = pValueText.node().getBBox();// 计算基准位置let baseY = 0;if (maxSum > 10) {baseY = pValueBBox.y - 10 + pValueBBox.height * maxSum;} else {baseY = pValueBBox.y + 7 + pValueBBox.height * maxSum;}console.log(baseY);let lineLevel = 0;d.comparisons.forEach((comp) => {const currentGroupCenter = xScale(d.group) + xScale.bandwidth() / 2;const compareGroupCenter = xScale(comp.vs) + xScale.bandwidth() / 2;const stars = getStars(comp.p);if (stars) {// 自动寻找可用层级（冲突检测）let foundLevel = false;while (!foundLevel) {// 检查当前层级是否被占用const existingLines = chart.selectAll(`.level-${lineLevel}`);if (existingLines.empty()) {foundLevel = true;} else {lineLevel++;}}// 计算当前层级的Y坐标，确保不超出面板顶部const currentY = Math.max(margin.top + 10,baseY - lineLevel * lineSpacing);// 绘制连接线chart.append("line").attr("class", `significance-line level-${lineLevel}`).attr("x1", currentGroupCenter).attr("x2", compareGroupCenter).attr("y1", currentY).attr("y2", currentY).style("stroke", "#ff4444").style("stroke-width", 1).style("marker-end", "url(#arrowhead)");// 添加星号chart.append("text").attr("class", "significance-star").attr("x", (currentGroupCenter + compareGroupCenter) / 2).attr("y", currentY + 1.5).text(stars).style("font-size", "10px").style("fill", "#cc0000").style("font-weight", "bold");lineLevel++;}});}});}// 添加X轴const xAxis = d3.axisBottom(xScale);chart.append("g").attr("class", "x-axis").attr("transform", `translate(0,${margin.top + plotHeight})`).call(xAxis).call((g) => {g.selectAll(".tick text").attr("fill", x_text_color).attr("font-size", x_text_size).attr("font-family", x_text_font).each(function () {const text = d3.select(this);text.attr("tmpY", text.attr("dy") || 0);}).attr("dy", (d, i, nodes) => {const text = d3.select(nodes[i]);const rotate = x_text_rotate;// 动态计算垂直偏移if (rotate > 70 && rotate <= 90) return "0.35em";if (rotate >= -90 && rotate < -70) return "0.4em";return text.attr("tmpY");}).attr("text-anchor", (d) =>x_text_rotate ? (x_text_rotate > 0 ? "start" : "end") : "middle").attr("transform", (d, i, nodes) =>x_text_rotate? `rotate(${x_text_rotate} 0 ${d3.select(nodes[i]).attr("y")})`: "");});// 添加Y轴const yAxis = d3.axisLeft(yScale);chart.append("g").attr("class", "y-axis").attr("transform", `translate(${margin.left},${margin.top})`).call(yAxis).selectAll(".tick text").attr("fill", y_text_color).attr("font-size", y_text_size).attr("font-family", y_text_font);});// 添加图例const legend = svg.append("g").attr("class", "legend").attr("transform",`translate(${chartsPerRow * chartWidth + 20}, ${30 + chartVerticalOffset})`);// 添加图例标题legend.append("text").attr("class", "legend-title").attr("x", 0).attr("y", -15).text(legend_title).attr("font-family", legend_title_font).attr("fill", legend_title_color).attr("font-size", legend_title_size);// 获取图例分组和颜色映射const groups = [...new Set(data.map((d) => d.group))].sort();// 绘制图例项groups.forEach((group, i) => {const legendItem = legend.append("g").attr("transform", `translate(0, ${i * 15})`);// 颜色方块legendItem.append("rect").attr("width", 10).attr("height", 10).attr("fill", colors[i % colors.length]);// 文字标签legendItem.append("text").attr("class", "legend-item").attr("x", 15).attr("y", 9).text(group).attr("font-family", legend_text_font).attr("fill", legend_text_color).attr("font-size", legend_text_size);});
};export default CombinationBoxPlot;

 完美~

然后页面调用方法：

 CombinationBoxPlot({data: plots,params: chartParam,container: "#combination-boxPlot",onBoxWidthCalculated: (width) => {boxWidths = width;}});

 展示部分效果图吧：

我真的是太太太太太太太太太太太太棒啦