fix: 完善聚类热图

src/components/ClusterHeatmapSecond/components/chart.vue

@@ -17,10 +17,10 @@ import {
     setMaxMinNumber,
     setHeatmap,
     setLegend,
-    setBasisLegend,
+    setConsensusLegend,
     setAxisTitle,
     setLabel,
-    setBasisHeatmap
+    setConsensusHeatmap
 } from '../utils/index';
 
 const chartRef = ref(null);
@@ -44,6 +44,8 @@ const generateChart = () => {
     let margin = 50;
     let radius = 3;
     let dendWidth = 0;
+    let xRatio = 330;
+    let yRatio = 500;
 
     let xAxisLength = chartData[0].values.length;
     const heatWidth = 2 * radius * xAxisLength;
@@ -75,6 +77,8 @@ const generateChart = () => {
         xAxisLength,
         heatWidth,
         heatHeight,
+        xRatio,
+        yRatio,
         ...ret
     };
 
@@ -88,6 +92,7 @@ const generateChart = () => {
 
     for (let i = 0; i < chartDataArr.length; i++) {
         setRankChart(configObj, chartDataArr[i], i);
+        setConsensus(configObj, chartDataArr[i], i);
     }
 
     svgInstance.value = svg.node();
@@ -98,8 +103,8 @@ const generateChart = () => {
 
 const setRankChart = (config, chartData, index) => {
     const title = `rank = ${index + 2}`;
-    let xRatio = 350;
-    let yRatio = 500;
+    let xRatio = config.xRatio;
+    let yRatio = config.yRatio;
     if (index <= 2) {
         xRatio = index * xRatio;
         yRatio = 0;
@@ -109,7 +114,7 @@ const setRankChart = (config, chartData, index) => {
     let xAxisLength = chartData[0].values.length;
     // 位置
     const position = {
-        title: [config.margin + xRatio, 0 + yRatio],
+        title: [config.margin + xRatio, yRatio],
         heatmap: [10 + xRatio, config.margin + yRatio],
         legend: [xAxisLength * (config.radius * 2) + 70 + xRatio, config.margin + yRatio],
         axisLabel: [xAxisLength * (config.radius * 2) + 12 + xRatio, config.margin + yRatio]
@@ -146,8 +151,25 @@ const setRankChart = (config, chartData, index) => {
     setLabel(configObj);
 };
 
-const setConsensus = (config) => {
-    const chartData = chartMockData.slice(0, 2);
+const setConsensus = (config, data, index) => {
+    const chartData = data.slice(0, 2);
+    const title = 'consensus';
+    let xRatio = config.xRatio;
+    let yRatio = config.yRatio;
+    if (index <= 2) {
+        xRatio = index * xRatio;
+        yRatio = 0;
+    } else if (index == 3) {
+        xRatio = 0;
+    }
+    let xAxisLength = chartData[0].values.length;
+    // 位置
+    const position = {
+        title: [xAxisLength * (config.radius * 2) + 170 + xRatio, 60 + yRatio],
+        heatmap: [10 + xRatio, config.margin - 20 + yRatio],
+        legend: [xAxisLength * (config.radius * 2) + 120 + xRatio, config.margin + 20 + yRatio],
+        axisLabel: [xAxisLength * (config.radius * 2) + 12 + xRatio, config.margin + yRatio]
+    };
     // max/min number
     const { maxNumber, minNumber } = setMaxMinNumber(chartData);
     // root config
@@ -155,12 +177,12 @@ const setConsensus = (config) => {
     // color config
     const colors = ['#9D9FFF', '#F57BFF', '#3AB1FF', '#D38BFF', '#00C745', '#F4952C'];
     const color = setColor(minNumber, maxNumber, colors);
-    const configObj = { ...config, root, orderingx, maxNumber, minNumber, color };
-    const heatmapRect = setBasisHeatmap(configObj);
+    const configObj = { ...config, root, orderingx, maxNumber, minNumber, color, title, position };
+    const heatmapRect = setConsensusHeatmap(configObj);
     // tips
     setTips(heatmapRect);
     // legend
-    config.show_legend && setBasisLegend(configObj);
+    config.show_legend && setConsensusLegend(configObj);
 };
 
 onMounted(() => {

src/components/ClusterHeatmapSecond/utils/index.js

@@ -142,15 +142,15 @@ export const setHeatmap = (config) => {
         .attr('fill', config.color());
 };
 
-// Basis heatmap
-export const setBasisHeatmap = (config) => {
+// Consensus heatmap
+export const setConsensusHeatmap = (config) => {
     return config.svg
         .append('g')
-        .attr('transform', `translate(${config.margin + 0}, ${config.margin})`)
+        .attr('transform', `translate(${config.position.heatmap[0]}, ${config.position.heatmap[1]})`)
         .selectAll('g')
         .data(config.root.leaves())
         .join('g')
-        .attr('transform', (d, i) => `translate(0, ${130 + config.radius * 2 * i})`)
+        .attr('transform', (d, i) => `translate(0, ${config.radius * 2 * i})`)
         .selectAll('rect')
         .data((d) => d.data.values.map((e, i) => d.data.values[config.orderingx[i]]))
         .join('rect')
@@ -161,7 +161,6 @@ export const setBasisHeatmap = (config) => {
         .attr('fill', config.color());
 };
 
-
 // legend
 export const setLegend = (config) => {
     const legendData = [...Array.from({ length: config.maxNumber }, (item, i) => i)];
@@ -184,28 +183,28 @@ export const setLegend = (config) => {
         );
 };
 
-// Basis legend
-export const setBasisLegend = (config) => {
+// Consensus legend
+export const setConsensusLegend = (config) => {
     const legendData = [...Array.from({ length: config.maxNumber }, (item, i) => i)];
 
-    const textX = 0 + config.xAxisLength * (config.radius * 2) + 180
-
     config.svg.append('text')
-        .attr('x', textX)
-        .attr('y', config.height / 3 - 110)
+        .attr('x', config.position.title[0])
+        .attr('y', config.position.title[1])
         .attr('fill', '#333333')
-        .attr('font-size', '20px')
+        .attr('fill', config.titleConfig.color)
+        .attr('font-size', `${config.titleConfig.fontSize}px`)
         .attr('font-family', `${config.titleConfig.fontFamily}`)
-        .attr('font-style', 'normal')
-        .attr('font-weight', 'bold')
+        .attr('font-style', `${config.titleConfig.fontStyle}`)
+        .attr('font-weight', `${config.titleConfig.fontWeight}`)
         .style('text-anchor', 'middle')
-        .text('basis');
+        .text('consensus');
 
     config.svg.append('g')
+        .attr('transform', `translate(${config.position.legend[0]}, ${config.position.legend[1]})`)
         .selectAll()
         .data(legendData)
         .join('g')
-        .attr('transform', (d, i, nodes) => `translate(${0 + config.xAxisLength * (config.radius * 2) + 160}, ${config.height / 3 + (nodes.length / 2 - i - 1) * 21 - 50})`)
+        .attr('transform', (d, i, nodes) => `translate(0, ${i * 21})`)
         .call((g) => g.append('rect').attr('width', 15).attr('height', 15).attr('fill', config.color()))
         .call((g) =>
             g