(function(){ // 1. 准备数据 - 使用云平台提供的sourceData变量 const sourceData= '{sourceData}'; const data = sourceData[0].dataList; // sheet 1 数据 console.log(data) // 2. 创建容器 const chartDiv = document.createElement("div"); chartDiv.style.width = "100%"; chartDiv.style.height = "500px"; chartDiv.style.display = "flex"; chartDiv.style.justifyContent = "center"; chartDiv.style.alignItems = "center"; // 3. 创建主绘图区域和图例容器 const container = document.createElement("div"); container.style.display = "flex"; container.style.alignItems = "center"; const mainplot = document.createElement("div"); mainplot.id = "mainplot"; container.appendChild(mainplot); const legendDiv = document.createElement("div"); legendDiv.id = "legend"; legendDiv.style.marginLeft = "10px"; container.appendChild(legendDiv); chartDiv.appendChild(container); // 4. 配置变量 - 使用云平台变量替换 // const width = {width} || 800; // const height = {height} || 500; // const margin = {margin} || {top: 40, right: 40, bottom: 50, left: 160}; // const log2FC_Cutoff = {log2FC_Cutoff} || 1; // const PValue_Cutoff = {PValue_Cutoff} || 1; const width = "{width}"; const height = "{height}"; const FontType = "{FontType}"; // 全局字体 const margin = {top:{top}, right: {right}, bottom: {bottom}, left: {left}}; const log2FC_Cutoff = "{log2FC_Cutoff}"; const PValue_Cutoff = "{PValue_Cutoff}"; const VIP_Cutoff = "{VIP_Cutoff}"; const colorDisc = "{colorDisc}"; const ColorRev = "{ColorRev}"; // 5. 数据预处理 data.forEach(d => { if (d.log2_FC !== undefined && d.log2_FC !== null) { d.FC = +d.log2_FC; } else { d.FC = +d.FC; d.FC = d.FC > 0 ? Math.log2(d.FC) : -Infinity; } d.PValue = +d.PValue; d.negLog10P = -Math.log10(d.PValue); d.VIP = +d.VIP // 分组逻辑 if (d.FC >= log2FC_Cutoff && d.PValue <= PValue_Cutoff && d.VIP >= VIP_Cutoff ) { d.group = "up_high_vip"; } else if (d.FC >= log2FC_Cutoff && d.PValue <= PValue_Cutoff && d.VIP < VIP_Cutoff ) { d.group = "up_low_vip"; } else if (d.FC <= -log2FC_Cutoff && d.PValue <= PValue_Cutoff && d.VIP >= VIP_Cutoff ) { d.group = "down_high_vip"; } else if (d.FC <= -log2FC_Cutoff && d.PValue <= PValue_Cutoff && d.VIP < VIP_Cutoff ) { d.group = "down_low_vip"; } else if ( Math.abs(d.FC) >= log2FC_Cutoff && d.PValue > PValue_Cutoff) { d.group = "no_sig_high_FC"; } else if ( Math.abs(d.FC) < log2FC_Cutoff && d.PValue < PValue_Cutoff) { d.group = "sig_low_FC"; } else { d.group = "nodiff"; } }); // 颜色映射 let unselectedColorMap; let baseColors; if(colorDisc==="none"){ unselectedColorMap = { up_high_vip: "{up_high_vip_color}", up_low_vip: "{up_low_vip_color}", down_high_vip: "{down_high_vip_color}", down_low_vip: "{down_low_vip_color}", no_sig_high_FC: "{no_sig_high_FC_color}", sig_low_FC: "{sig_low_FC_color}", nodiff : "{nodiff_color}" }; }else{ if(colorDisc==="SCIxiliezhiAAASpeise"){ baseColors=["#3B4992","#EE0000","#008B45","#631879","#008280","#BB0021","#5F559B","#A20056","#808180","#1B1919"] } if(colorDisc==="SCIxiliezhiNEJMpeise"){ baseColors=["#BC3C29","#2A6696","#7D7E66","#A18634","#2A8359","#6E78A6","#728DAE","#AFB7A1","#FBBC92","#EE4C97"] } if(colorDisc==="SCIxiliezhiLANCETpeise"){ baseColors=["#00468B","#D3080F","#688D32","#16A28D","#5178A8","#C28299","#E2756F","#AD2849","#9DA5A5","#1B1919"] } if(colorDisc==="SCIxiliezhiJAMApeise"){ baseColors=["#374E55","#A7794A","#959574","#00A1D5","#776575","#9F6A60","#79AF97","#6F7E98","#716C8A","#80796B"] } if(colorDisc==="dansejianbianpeise1"){ baseColors=["#DFF2F1","#B2DFDA","#7FCBC4","#4CB6AC","#26A599","#009687","#00887A","#00796B","#00685B","#004C3F"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise2"){ baseColors=["#F7FBFF","#E1EDF8","#CBDFF1","#ABD0E6","#82BADB","#59A2CF","#3787C0","#1B6AAF","#084D97","#08306B"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise3"){ baseColors=["#F7FCFD","#E7F6F9","#D2EEEA","#AADFD3","#7DCCB4","#56B990","#37A266","#1B843F","#00682A","#00441B"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise4"){ baseColors=["#F7FCFD","#E3EEF5","#C6D9E9","#A9C4DE","#94A7CF","#8C83BD","#8B5DAA","#863696","#7B0D77","#4D004B"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise5"){ baseColors=["#F7FCF0","#E3F4DD","#D0EDCA","#B4E2BA","#8FD4BD","#67C1CB","#42A6CC","#2384BA","#0864A7","#084081"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise6"){ baseColors=["#FFFFFF","#F2F2F2","#DEDEDE","#C6C6C6","#A7A7A7","#868686","#686868","#484848","#212121","#000000"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise7"){ baseColors=["#FFF7EC","#FEEACC","#FDD8A7","#FDC38D","#FCA16C","#F67B51","#E7533A","#CF2518","#AD0000","#7F0000"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise8"){ baseColors=["#F7F4F9","#E9E3F0","#D8C2DF","#CDA0CD","#D57ABA","#E34A9F","#DF2179","#C20E52","#93003F","#67001F"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise9"){ baseColors=["#FFF7F3","#FDE3DF","#FCCBC6","#FBACB9","#F880AA","#EB519D","#CD238F","#A2017C","#750176","#49006A"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise10"){ baseColors=["#FFFFE5","#F8FCBE","#E0F3A8","#BCE395","#90D082","#60BA6D","#379E54","#1B7E40","#006435","#004529"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise11"){ baseColors=["#FFFFE5","#FFF8C1","#FEE79B","#FECE65","#FEAC3A","#F68720","#E1640E","#C14702","#933204","#662506"] baseColors.reverse() } if(colorDisc==="dansejianbianpeise12"){ baseColors=["#FFFFCC","#FFEFA5","#FEDD7F","#FEBF5A","#FD9D43","#FD7134","#F43D25","#DB141E","#B60026","#800026"] baseColors.reverse() } if(colorDisc==="shuangsejianbianpeise1"){ baseColors=["#40004B","#7A3287","#A27CB3","#CEB5D7","#EEE4EF","#E6F3E3","#B7E2B1","#6BB86F","#227E3C","#00441B"] } if(colorDisc==="shuangsejianbianpeise2"){ baseColors=["#8E0152","#C82582","#E285B8","#F5C4E1","#FAEAF3","#EEF6E1","#C7E89F","#8CC450","#539725","#276419"] } if(colorDisc==="shuangsejianbianpeise3"){ baseColors=["#543005","#92560E","#C68F3F","#E7CF94","#F6EED9","#DBEFEC","#98D7CD","#46A39A","#076B63","#003C30"] } if(colorDisc==="shuangsejianbianpeise4"){ baseColors=["#FF7200","#FF8A2B","#FFA155","#FABA85","#EBD4BF","#D1D6C0","#ACC188","#90AF5C","#7FA240","#648C16"] } if(colorDisc==="shuangsejianbianpeise5"){ baseColors=["#796409","#BD9D13","#F5D54B","#F8E280","#F8EEC6","#E7D9E4","#D0AFC9","#BC8EB2","#845579","#53354D"] } if(colorDisc==="shuangsejianbianpeise6"){ baseColors=["#9E0142","#D8434E","#F67B4A","#FDBF6F","#FEEEA2","#F1F9A9","#BFE5A0","#75C8A5","#388EBA","#5E4FA2"] } if(colorDisc==="shuangsejianbianpeise7"){ baseColors=["#A50026","#DA372A","#F67B4A","#FDBF71","#FEEEA5","#EEF8DF","#BDE2EE","#80B7D6","#4A7BB7","#313695"] } if(colorDisc==="shuangsejianbianpeise8"){ baseColors=["#A50026","#DA372A","#F67B4A","#FDBF6F","#FEEEA2","#EAF6A2","#B7E075","#74C365","#229C52","#006837"] } if(colorDisc==="shuangsejianbianpeise9"){ baseColors=["#80FFFF","#99FFFF","#B3FFFF","#CCFFFF","#E6FFFF","#FFE6FF","#FFCCFF","#FFB3FF","#FF99FF","#FF80FF"] } if(colorDisc==="shuangsejianbianpeise10"){ baseColors=["#00FF00","#04CB04","#099709","#0D630D","#122E12","#2E1212","#630D0D","#970909","#CB0404","#FF0000"] } if(colorDisc==="shuangsejianbianpeise11"){ baseColors=["#0AA1FF","#41B6FF","#77CBFF","#AEE0FF","#E4F5FF","#FEF9E5","#FCEEB2","#F9E37E","#F7D84A","#F5CC16"] } if(colorDisc==="shuangsejianbianpeise12"){ baseColors=["#0000FF","#3636FF","#6D6DFF","#A3A3FF","#DADAFF","#FBE5E9","#FFB6B6","#FF7F7F","#FF4848","#FF1111"] } if(colorDisc==="fenzupeise1"){ baseColors=["#FC97AF","#A1E2C8","#C5F5AE","#CBE7B8","#81CBF4","#E8C6AB","#E0AFD2","#D3C8CC","#BEF4B7","#76F2F2"] } if(colorDisc==="fenzupeise2"){ baseColors=["#5470C6","#8AC27E","#E3C95E","#F28761","#AA98A9","#5AB3AE","#7B9867","#E67C68","#A363B7","#EA7CCC"] } if(colorDisc==="fenzupeise3"){ baseColors=["#E41A1C","#4A73A7","#48A462","#7F6E85","#D16948","#FFB817","#E1C72F","#B8604A","#ED84BB","#999999"] } if(colorDisc==="fenzupeise4"){ baseColors=["#4269D0","#EFB118","#FF725C","#6CC5B0","#3CA951","#FF8AB7","#A463F2","#97BBF5","#9C6B4E","#9498A0"] } if(colorDisc==="fenzupeise5"){ baseColors=["#0073C2","#EFC000","#868686","#CD534C","#7AA6DC","#003C67","#8F7700","#3B3B3B","#A73030","#4A6990"] } if(colorDisc==="fenzupeise6"){ baseColors=["#8DD3C7","#F1F0BC","#D9A0AC","#A9A1B3","#EFB46F","#BBDC77","#F0D1E1","#C9A8C9","#C8D3C3","#FFED6F"] } if(colorDisc==="fenzupeise7"){ baseColors=["#1B9E77","#AF6D1C","#A16864","#9B58A5","#D9377E","#74982A","#BBA90B","#CA930E","#98722D","#666666"] } if(colorDisc==="fenzupeise8"){ baseColors=["#A6CEE3","#408FAB","#7AC360","#B89C75","#E6282A","#FDB863","#ED9047","#9571B5","#DED499","#B15928"] } if(colorDisc==="fenzupeise9"){ baseColors=["#FF0000","#FF9900","#CCFF00","#33FF00","#00FF66","#00FFFF","#0066FF","#3300FF","#CC00FF","#FF0099"] } if(colorDisc==="fenzupeise10"){ baseColors=["#5B8DFE","#6578F7","#6F62F0","#9649C8","#C52F96","#E43061","#F34B2A","#FE6801","#FF8D05","#FFB109"] } if(colorDisc==="fenzupeise11"){ baseColors=["#9B5DE5","#C15CD0","#E75BBA","#F5898E","#FBC65A","#C6DB69","#55C9BB","#00C1F5","#00DBE4","#00F5D4"] } if(colorDisc==="fenzupeise12"){ baseColors=["#7F00FF","#4657FA","#19A3EF","#2BDBDC","#64F7C2","#9CF7A2","#D5D97E","#F9A055","#FF532A","#FF0000"] } if(colorDisc==="seruoyouhaoxingpeise"){ baseColors=["#000000","#CC8D00","#76AFB5","#1DA59A","#85C558","#85B174","#476B77","#D36425","#C67DA5","#999999"] } if(colorDisc==="dafenzupeise1"){ baseColors=["#E69F00","#73B0B9","#23A7A3","#5DB960","#C4CF57","#0574B0","#A56228","#D06D5F","#A7728F","#726955","#AA7604","#408BA0","#0D838F","#4A933E","#B7B722","#0D5D7E","#764B23","#A94544","#90466F","#635B49","#F0B530","#A4C4B8","#3FDFD0","#4BF39F","#DCE47F","#1EACF1","#B38D64","#EC8F6D","#C397AF","#959188","#F1C35D","#BBD0BF","#66E7DD","#62FBB7","#EAEC95","#53BFEF","#BAA58B","#F1A485","#D1ACC0","#A2A09C","#8E6A1B","#416C6B","#0D6B7E","#266D38","#A79D0F","#1F555A","#4E3D29","#85372A","#7D375E","#3D3D3D"] } if(colorDisc==="dafenzupeise2"){ baseColors=["#5050FF","#CC3F33","#799E5A","#E6DE85","#4F697D","#B16B49","#619FCF","#7D3C68","#7CCC75","#C9878F","#8F5238","#927276","#CA6034","#BD846F","#987A94","#B08262","#6B5B74","#A8A0A1","#7D2671","#C46068","#AD9F68","#8B7B36","#B5B000","#A1BC4F","#BAA156","#B2B300","#63CC00","#17CC1C","#00CC6D","#00AEB7","#0667EB","#3164FF","#BFA75F","#FFCC33","#B84039","#99130F","#995200","#868D00","#449900","#0A9915","#009958","#008491","#003E99","#170699","#5E0099","#950082","#D2004A","#FD1362","#05D28E","#14FFB1"] } if(colorDisc==="dafenzupeise3"){ baseColors=["#FF0000","#FF4E00","#FF9A00","#FFB400","#F5CE00","#72E800","#06F910","#3AC592","#6E91FF","#A25DFF","#C73DE8","#AD7175","#99992D","#99996C","#A883A0","#DC35BA","#F700AB","#DD0043","#D52525","#EF8E8E","#FFD6A2","#FFF03A","#F4FF00","#DAFF00","#A7E000","#5A9F00","#275E36","#0C1D9E","#2C3ADB","#7AA2F5","#6ADCFF","#1CF6FF","#43FFFF","#ABFFFF","#BAA7ED","#A024D3","#AC38DF","#C686F9","#B8859C","#9E6B1A","#846600","#6A6600","#66662C","#666660","#949494","#C8C8C8","#A5CC89","#7BCC40","#A2CC6A","#CCCC99"] } if(colorDisc==="dafenzupeise4"){ baseColors=["#5050FF","#CC3F33","#799E5A","#E6DE85","#4F697D","#B16B49","#619FCF","#7D3C68","#7CCC75","#C9878F","#8F5238","#927276","#CA6034","#BD846F","#987A94","#B08262","#6B5B74","#A8A0A1","#7D2671","#C46068","#AD9F68","#8B7B36","#B5B000","#A1BC4F","#BAA156","#B2B300","#63CC00","#17CC1C","#00CC6D","#00AEB7","#0667EB","#3164FF","#BFA75F","#FFCC33","#B84039","#99130F","#995200","#868D00","#449900","#0A9915","#009958","#008491","#003E99","#170699","#5E0099","#950082","#D2004A","#FD1362","#05D28E","#14FFB1"] } if(colorDisc==="dafenzupeise5"){ baseColors=["#F0B142","#62D6F6","#F14149","#28C580","#E9E417","#B02F96","#1CE8BF","#F3854F","#8052D8","#C6C5E8","#D292FC","#FCB9B9","#E5C4A5","#141472","#56A8C1","#BEDF50","#46BBA8","#ACB9EA","#A17817","#821762","#A2E2B3","#406BDE","#0CB1ED","#51EBFC","#C4F98C","#FFDC48","#FEA8C3","#F1835B","#C4477A","#821762","#D544AE","#50B5F5","#90D1F4","#A0F5F1","#D1FCE4","#54C4B5","#D4E746","#EDB349","#FEE05B","#F76C50","#BA2D2D","#3793DE","#A7DBD1","#EDE893","#76CFED","#C67997","#BFAC88","#D39279","#9E516B","#666B96"] } if(colorDisc==="dafenzupeise6"){ baseColors=["#69A4F9","#BFE046","#EDAC2E","#F2F225","#A155F9","#DB2830","#4EC4B5","#4599DE","#E8851F","#6FBA33","#5F64AC","#58B984","#891A3A","#BF109A","#F7CB16","#15AD68","#14B5B5","#4EBEE5","#1A497C","#EC6925","#096D42","#7A1B6C","#D33C67","#DB9421","#DED531","#521F84","#87A822","#43EFCE","#11C2CC","#FC68C7","#E77DEF","#76CFED","#125FB2","#A36924","#C67997","#B271AD","#ACB9EA","#FCB4B4","#F9CFA5","#F9EFB4","#D2F7BA","#8BD6D6","#C5FCDD","#C0E9FC","#E5BCF7","#EDA4D3","#D39279","#D6BEB2","#E2A1BA","#7350EB"] } if(colorDisc==="dafenzupeise7"){ baseColors=["#BFE046","#F7CB16","#FCB4B4","#E77DEF","#ACB9EA","#24E4ED","#69A4F9","#43EFCE","#14B5B5","#125FB2","#521F84","#DB2830","#EC6925","#F2F225","#C0E9FC","#D2F7BA","#F9CFA5","#EDA4D3","#15AD68","#6FBA33","#096D42","#DB9421","#1A497C","#7350EB","#BF109A","#D33C67","#FC68C7","#EDAC2E","#DED531","#87A822","#4EC4B5","#77D7F2","#A155F9","#B271AD","#7A1B6C","#A36924","#C67997","#E8851F","#891A3A","#D39279","#E5BCF7","#5F64AC","#4599DE","#76CFED","#E2A1BA","#F9EFB4","#D6BEB2","#58B984","#C5FCDD","#8BD6D6"] } if(colorDisc==="dafenzupeise8"){ baseColors=["#DB2830","#76CFED","#DB9421","#7A1B6C","#15AD68","#DED531","#2E0A4A","#14B5B5","#EDE893","#4599DE","#3B3230","#C9CACA","#5F64AC","#B271AD","#EDA4D3","#D33C67","#EC6925","#A155F9","#70F2D3","#6FBA33","#EDAC2E","#096D42","#4EC4B5","#A36924","#125FB2","#7350EB","#891A3A","#BF109A","#E8851F","#E77DEF","#4EBEE5","#69A4F9","#F9CFA5","#13D9B1","#BFE046","#BFAC88","#D2F7BA","#24E4ED","#A6E2BE","#C0E9FC","#F9EFB4","#FCB4B4","#E5BCF7","#ACB9EA","#A7DBD1","#F2F225","#C67997","#87A822","#D39279","#5DA6E8"] } if(colorDisc==="dafenzupeise9"){ baseColors=["#17154F","#2E3379","#65589A","#9490CB","#AB82A8","#E1A1A9","#EB9388","#CF5748","#D36A14","#EDA924","#D9B248","#868B35","#5F5139","#D8455A","#E16643","#9D62F6","#70F1D0","#6FBC3A","#E0AD2F","#2E773F","#3FB09B","#8B834D","#446281","#4B56D4","#7F338D","#A21567","#D04068","#E88267","#BB90EC","#54B8E9","#81ABEB","#E2D0A6","#1AD9AD","#BBE048","#BFB083","#CFECB3","#48E8E3","#84E3CA","#B8E7E8","#E3EDD0","#FBCEB4","#F1B8D5","#CDBBF1","#AAC5E1","#BEE29C","#E7D441","#BA8282","#90A52D","#CC9380","#5DA6E8"] } if(colorDisc==="dafenzupeise10"){ baseColors=["#5B859E","#223E63","#6A7E4D","#2E6247","#B08166","#BE6243","#C6776C","#9D5859","#905A6C","#866284","#8A6A54","#CCA835","#B69E22","#A6D862","#55BBB1","#ABB4D9","#A07619","#831B5F","#9FCDAB","#507ED7","#18A1EA","#3DDAF8","#9CF4B3","#E7E864","#FEC089","#F89792","#DF6B68","#AD3672","#9A2478","#B75DBE","#5ABAF5","#92D5F4","#A2F5F0","#D0FCE4","#5EC9B9","#C2E256","#E8BE48","#F9D456","#F99254","#D2453B","#72658F","#6EB6D8","#C5E1B6","#C1DFB4","#8EB5D3","#C48593","#C3A785","#CD8A77","#9B536E","#666B96"] } if(colorDisc==="dafenzupeise11"){ baseColors=["#5050FF","#CC3F33","#799E5A","#E6DE85","#4F697D","#B16B49","#619FCF","#7D3C68","#7CCC75","#C9878F","#8F5238","#927276","#CA6034","#BD846F","#987A94","#B08262","#6B5B74","#A8A0A1","#7D2671","#C46068","#AD9F68","#8B7B36","#B5B000","#A1BC4F","#BAA156","#B2B300","#63CC00","#17CC1C","#00CC6D","#00AEB7","#0667EB","#3164FF","#BFA75F","#FFCC33","#B84039","#99130F","#995200","#868D00","#449900","#0A9915","#009958","#008491","#003E99","#170699","#5E0099","#950082","#D2004A","#FD1362","#05D28E","#14FFB1"] } if(colorDisc==="dafenzupeise12"){ baseColors=["#795F35","#B68D6E","#F3BBA8","#F6847B","#F03E40","#C34346","#876163","#968A7B","#D4BB91","#F6DA7A","#FCE630","#FEE705","#FCD313","#F4B822","#D28332","#B05346","#865E7B","#5C69B0","#3D8ACD","#1FADEA","#66A8C6","#C19B94","#C59397","#A28DB0","#B0A6B5","#E2D8AA","#E6DD9C","#AEA78A","#928D8B","#B8B6B4","#DAD1CF","#E8AC9F","#F58870","#ED7B5F","#E66E4E","#EB7646","#F18140","#A8954A","#49AC58","#69C171","#CDD690","#F9B09D","#F25398","#EF39A4","#F389C9","#E4BED7","#9EA5A3","#658A75","#816576","#9D4076"] } if(ColorRev){ baseColors.reverse() } unselectedColorMap = { up_high_vip: baseColors[9], up_low_vip: baseColors[7], down_high_vip: baseColors[0], down_low_vip: baseColors[2], no_sig_high_FC: d3.rgb(baseColors[5]).darker(0.8), sig_low_FC: "#686868", nodiff : "#000000" }; } const legendData = [ { group: "up_high_vip", color: unselectedColorMap.up_high_vip, label: "UP high VIP" }, { group: "up_low_vip", color: unselectedColorMap.up_low_vip, label: "UP low VIP" }, { group: "down_high_vip", color: unselectedColorMap.down_high_vip, label: "DOWN high VIP" }, { group: "down_low_vip", color: unselectedColorMap.down_low_vip, label: "DOWN low VIP" }, { group: "no_sig_high_FC", color: unselectedColorMap.no_sig_high_FC, label: "Non-significant high FC" }, { group: "sig_low_FC", color: unselectedColorMap.sig_low_FC, label: "Significant low FC" }, { group: "nodiff", color: unselectedColorMap.nodiff, label: "Non-significant" } ]; // 标题相关变量 const TitleDisplayed = "{TitleDisplayed}"; // 是否显示标题 const TitleFontSize = "{TitleFontSize}"; // 标题字号 const TitleTextColor = "{TitleTextColor}"; // 标题文字颜色 const TitleText = "{TitleText}"; // 标题内容 // 坐标轴相关变量 const XYDisplayed = "{XYDisplayed}" // 标签轴是否显示 const XYFontSize = "{XYFontSize}"; // 坐标轴标题字号 const XYTextColor = "{XYTextColor}"; // 坐标轴标题颜色 const XLab = "{XLab}"; // X轴标题 const YLab = "{YLab}"; // Y轴标题 const AxisSize = "{AxisSize}"; // 坐标轴粗细 const GridLines = "{GridLines}"; // 是否显示网格线 const AxisLines = true; // 是否显示轴刻度线 const AxisTextSize = "{AxisTextSize}"; // 轴文字大小 // 图例相关变量 const LegendDisplayed = "{LegendDisplayed}"; const LegendSize = "{LegendSize}"; const LegendFontSize = "{LegendFontSize}"; const LegendTextColor = "{LegendTextColor}"; const highlightColor = "{highlightColor}"; // 选中后散点配色 const highlightLabelColor = "black"; // 选中后tips文字颜色 const pointShape = "circle"; // 散点形状 const unselectedPointRadius = "{PointSize}"; // 未选中散点大小 const PointOpacity = "{PointOpacity}" const selectedPointRadius = "{selectedPointRadius}"; // 选中散点大小 const tooltipFontSize = "12px"; // tooltip字号大小 // 7. 创建SVG画布 const svg = d3.select(mainplot) .append("svg") .attr("width", width) .attr("height", height); // 8. 延迟计算尺寸，确保 SVG 已渲染 requestAnimationFrame(() => { console.log('data in rAF', data); // 坐标轴范围（默认自动） let XAxisMin = d3.extent(data, d => d.FC)[0]-2; let XAxisMax = d3.extent(data, d => d.FC)[1]+2; let YAxisMin = -.5; let YAxisMax = d3.max(data, d => d.negLog10P) + 5; console.log('XAxisMin in rAF', XAxisMin); console.log('XAxisMax in rAF', XAxisMax); // 9. 添加标题 if (TitleDisplayed) { svg.append("text") .attr("x", (width / 2)+width*10/100) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .attr("font-size", TitleFontSize) .attr("fill", TitleTextColor) .attr("font-family", FontType) .attr("font-weight", "bold") .text(TitleText); } // 10. 创建比例尺 const x = d3.scaleLinear() .domain([XAxisMin, XAxisMax]) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([YAxisMin, YAxisMax]) .range([height - margin.bottom, margin.top]); // 11. 创建坐标轴 const xAxis = d3.axisBottom(x) .tickSize(GridLines ? -height + margin.top + margin.bottom : (AxisLines ? 6 : 0)) .tickPadding(8); const yAxis = d3.axisLeft(y) .tickSize(GridLines ? -width + margin.left + margin.right : (AxisLines ? 6 : 0)) .tickPadding(8); // 12. 添加X轴 svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .call(g => g.selectAll(".domain, .tick line") .attr("stroke-width", AxisSize) .attr("stroke", function() { // 网格线为灰色高透明度，主轴线为默认 // return d3.select(this).classed("tick") ? "rgba(128,128,128,0.01)" : "#333"; return d3.select(this).classed("domain") ? "#333" : "rgba(128,128,128,0.15)"; }) .attr("opacity", function() { return d3.select(this).classed("tick") ? 1 : 1; })) .call(g => g.selectAll("text") .attr("font-size", AxisTextSize) .attr("font-family", FontType)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .call(g => g.selectAll(".domain, .tick line") .attr("stroke-width", AxisSize) .attr("stroke", function() { // return d3.select(this).classed("tick") ? "rgba(128,128,128,0.01)" : "#333"; return d3.select(this).classed("domain") ? "#333" : "rgba(128,128,128,0.15)"; }) .attr("opacity", function() { return d3.select(this).classed("tick") ? 1 : 1; })) .call(g => g.selectAll("text") .attr("font-size", AxisTextSize) .attr("font-family", FontType)); // 14. 添加坐标轴标签 if (XYDisplayed) { svg.append("text") .attr("x", (width / 2)+width*10/100) .attr("y", height - 10) .attr("text-anchor", "middle") .attr("font-size", XYFontSize) .attr("fill", XYTextColor) .attr("font-family", FontType) .text(XLab); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 120) .attr("text-anchor", "middle") .attr("font-size", XYFontSize) .attr("fill", XYTextColor) .attr("font-family", FontType) .text(YLab); } // 16. 添加散点 svg.selectAll(pointShape) .data(data) .enter() .append(pointShape) .attr("cx", d => x(d.FC)) .attr("cy", d => y(d.negLog10P)) .attr("r", unselectedPointRadius) .attr("fill", d => unselectedColorMap[d.group]) .attr("opacity", PointOpacity) .on("mouseover", function(event, d) { d3.select(this) .transition() .duration(100) .attr("r", selectedPointRadius) .attr("fill", highlightColor); // svg.append(" // 显示名称 svg.append("text") .attr("id", "hover-label") .attr("x", x(d.FC)) .attr("y", y(d.negLog10P) - 10) .attr("text-anchor", "middle") .attr("font-size", tooltipFontSize) .attr("fill", highlightLabelColor) .attr("font-family", FontType) .attr("font-weight", "bold") .text(d.Name); }) .on("mouseout", function(event, d) { d3.select(this) .transition() .duration(100) .attr("r", unselectedPointRadius) // .attr("fill", d.color); .attr("fill", d => unselectedColorMap[d.group]) svg.select("#hover-label").remove(); }); // 15. 添加参考线 svg.append("line") .attr("x1", x(log2FC_Cutoff)).attr("x2", x(log2FC_Cutoff)) .attr("y1", y.range()[0]).attr("y2", y.range()[1]) .attr("stroke", "#888").attr("stroke-dasharray", "4 4"); svg.append("line") .attr("x1", x(-log2FC_Cutoff)).attr("x2", x(-log2FC_Cutoff)) .attr("y1", y.range()[0]).attr("y2", y.range()[1]) .attr("stroke", "#888").attr("stroke-dasharray", "4 4"); svg.append("line") .attr("x1", x.range()[0]).attr("x2", x.range()[1]) .attr("y1", y(-Math.log10(PValue_Cutoff))).attr("y2", y(-Math.log10(PValue_Cutoff))) .attr("stroke", "#888").attr("stroke-dasharray", "4 4"); // 添加图例 if (LegendDisplayed) { const legendSvg = d3.select("#legend") .append("svg") .attr("width", 180) .attr("height", legendData.length * LegendSize * 3 + 20); const legend = legendSvg.append("g") .attr("transform", "translate(20,20)"); legend.selectAll("circle") .data(legendData) .enter() .append("circle") .attr("cx", 0) .attr("cy", (d, i) => i * LegendSize * 3) .attr("r", LegendSize) .attr("fill", d => d.color); legend.selectAll("text") .data(legendData) .enter() .append("text") .attr("x", LegendSize * 2 + 4) // .attr("y", (d, i) => i * LegendSize * 3 + LegendSize / 2) // .attr("alignment-baseline", "middle") .attr("y", (d, i) => i * LegendSize * 3) .attr("dy", "0.35em") // 垂直居中 .attr("font-size", LegendFontSize) .attr("fill", LegendTextColor) .attr("font-family", FontType) .text(d => d.label); } }); return chartDiv; })()