feat: update

src/components/ClusterHeatmapSecond/components/chart.vue

@@ -18,13 +18,9 @@ import {
     setHeatmap,
     setLegend,
     setBasisLegend,
-    setConsensusLegend,
     setAxisTitle,
     setLabel,
-    setBasisHeatmap,
-    setConsensusHeatmap,
-    setSilhouetteHeatmap,
-    setSilhouetteLegend
+    setBasisHeatmap
 } from '../utils/index';
 
 const chartRef = ref(null);

src/components/ClusterHeatmapSecond/utils/index.js

@@ -161,43 +161,6 @@ export const setBasisHeatmap = (config) => {
         .attr('fill', config.color());
 };
 
-// Consensus heatmap
-export const setConsensusHeatmap = (config) => {
-    return config.svg
-        .append('g')
-        .attr('transform', `translate(${config.margin + 0}, ${config.margin})`)
-        .selectAll('g')
-        .data(config.root.leaves())
-        .join('g')
-        .attr('transform', (d, i) => `translate(0, ${150 + config.radius * 2 * i})`)
-        .selectAll('rect')
-        .data((d) => d.data.values.map((e, i) => d.data.values[config.orderingx[i]]))
-        .join('rect')
-        .attr('x', (d, i) => i * 2 * config.radius)
-        .attr('y', 0)
-        .attr('width', 2 * config.radius)
-        .attr('height', 2 * config.radius)
-        .attr('fill', config.color());
-};
-
-// Silhouette heatmap
-export const setSilhouetteHeatmap = (config) => {
-    return config.svg
-        .append('g')
-        .attr('transform', `translate(${config.margin + 0}, ${config.margin * 3})`)
-        .selectAll('g')
-        .data(config.root.leaves())
-        .join('g')
-        .attr('transform', (d, i) => `translate(0, ${150 + config.radius * 2 * i})`)
-        .selectAll('rect')
-        .data((d) => d.data.values.map((e, i) => d.data.values[config.orderingx[i]]))
-        .join('rect')
-        .attr('x', (d, i) => i * 2 * config.radius)
-        .attr('y', 0)
-        .attr('width', 2 * config.radius)
-        .attr('height', 2 * config.radius)
-        .attr('fill', d => d3.interpolateGreens(d));
-};
 
 // legend
 export const setLegend = (config) => {
@@ -255,97 +218,6 @@ 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) + 205
-
-    config.svg.append('text')
-        .attr('x', textX)
-        .attr('y', config.height / 3 + 50)
-        .attr('fill', '#333333')
-        .attr('font-size', '20px')
-        .attr('font-family', `${config.titleConfig.fontFamily}`)
-        .attr('font-style', 'normal')
-        .attr('font-weight', 'bold')
-        .style('text-anchor', 'middle')
-        .text('consensus');
-
-    config.svg.append('g')
-        .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 + 110})`)
-        .call((g) => g.append('rect').attr('width', 15).attr('height', 15).attr('fill', config.color()))
-        .call((g) =>
-            g
-                .append('text')
-                .attr('x', 20)
-                .attr('y', 9)
-                .attr('dy', '0.3em')
-                .style('font', '13px sans-serif')
-                .text((d) => d)
-        );
-}
-
-// Silhouette legend
-export const setSilhouetteLegend = (config) => {
-    const textX = 0 + config.xAxisLength * (config.radius * 2) + 200
-    const legendData = [config.maxNumber, config.minNumber]
-
-    config.svg.append('text')
-        .attr('x', textX)
-        .attr('y', config.height / 3 + 210)
-        .attr('fill', '#333333')
-        .attr('font-size', '20px')
-        .attr('font-family', `${config.titleConfig.fontFamily}`)
-        .attr('font-style', 'normal')
-        .attr('font-weight', 'bold')
-        .style('text-anchor', 'middle')
-        .text('silhouette');
-
-    config.svg.append('g')
-        .selectAll()
-        .data(legendData)
-        .join('text')
-        .attr('x', textX + 20)
-        .attr('y', (d, i) => config.height / 3 + i * 40 + 240)
-        .attr('fill', config.titleConfig.color)
-        .attr('font-style', `${config.titleConfig.fontStyle}`)
-        .attr('font-weight', `${config.titleConfig.fontWeight}`)
-        .style('font', '13px sans-serif')
-        .style('text-anchor', 'middle')
-        .text((d) => d);
-
-    const gradient = config.svg
-        .append('defs')
-        .append('linearGradient')
-        .attr('id', 'mylLnearGradient')
-        .attr('x1', '0%')
-        .attr('y1', '0%')
-        .attr('x2', '0%')
-        .attr('y2', '100%')
-        .attr('spreadMethod', 'pad');
-    gradient
-        .append('stop')
-        .attr('offset', '0%')
-        .attr('stop-color', 'rgb(0,128,0,1)')
-        .attr('stop-opacity', 1);
-    gradient
-        .append('stop')
-        .attr('offset', '100%')
-        .attr('stop-color', 'rgb(0,128,0,0.1)')
-        .attr('stop-opacity', 1);
-
-    config.svg.append('rect')
-        .attr('width', '15')
-        .attr('height', '60')
-        .attr("fill", "url(#mylLnearGradient)")
-        .attr("x", `${0 + config.xAxisLength * (config.radius * 2) + 160}`)
-        .attr("y", `${config.height / 3 + 225}`)
-}
-
 // 标签
 export const setAxisTitle = (config) => {
     const labelList = config.root.leaves().map((item) => item.data.id);