难以让气泡聚集在圆环图的中心

问：

当前外观：

我追求什么：

视觉问题：

我一直在尝试创建一个带有簇状气泡的圆环图。目标是将所有气泡紧密地组合在圆环图的中心。但是，当前的实现不会产生预期的结果。

我尝试过什么：

我试图通过计算气泡相对于图表中心的位置来聚类气泡。我使用极坐标来确定它们的位置，但气泡仍然没有像预期的那样聚集。

预期结果：

我希望所有气泡都紧密地聚集在圆环图的中心，从而创建具有视觉吸引力和连贯性的数据表示。

请求协助：

我正在寻求有关如何修改代码以实现所需聚类效果的指导。我应该考虑进行任何调整或方法，以使气泡有效地聚集在圆环图的中心？

class BubbleChart {
    constructor(canvasId, data) {
        this.canvasId = canvasId;
        this.data = data;
        this.initVis();
    }

    initVis() {
        let vis = this; // Define 'vis' as a reference to the class instance

        // Initialize chart dimensions and other settings using 'vis'
        vis.margin = { top: 100, right: 50, bottom: 50, left: 110 };
        vis.width = 400 - vis.margin.left - vis.margin.right;  // Width of the bubble chart canvas
        vis.height = 400 - vis.margin.top - vis.margin.bottom; // Height of the bubble chart canvas

        vis.createChart();
    }

    createChart() {
        let vis = this; // Reference to the class instance

        const canvas = document.getElementById(vis.canvasId);
        const ctx = canvas.getContext('2d');

        // Define the number of bubbles
        const numBubbles = vis.data.length;
        const clusterRadius = Math.min(vis.width, vis.height) * 0.3; // Radius of the cluster

        // Calculate the positions of bubbles closely together in the center
        const clusterX = vis.width / 2; // Cluster center X
        const clusterY = vis.height / 2; // Cluster center Y
        const angleIncrement = (2 * Math.PI) / numBubbles; // Angle increment for placing bubbles

        const bubbleData = {
            datasets: [{
                label: vis.data.map(d => d.Topic),
                backgroundColor: vis.data.map((_, i) => vis.getColor(i)),
                data: vis.data.map((item, i) => {
                    // Calculate positions closely together in the center
                    const bubbleAngle = i * angleIncrement; // Angle for the current bubble within the cluster
                    const bubbleX = clusterX + clusterRadius * Math.cos(bubbleAngle); // Adjusted X within cluster
                    const bubbleY = clusterY + clusterRadius * Math.sin(bubbleAngle); // Adjusted Y within cluster
                    const r = 10; // Use a fixed radius for all bubbles within the cluster
                    return {
                        x: bubbleX,
                        y: bubbleY,
                        r: r
                    };
                })
            }]
        };

        new Chart(ctx, {
            type: 'bubble',
            data: bubbleData,
            options: {
                plugins: {
                    legend: {
                        display: false // This will hide the legend
                    }
                },
                scales: {
                    x: { display: false },
                    y: { display: false }
                },
                tooltips: { // Ensure tooltips are enabled for hover information
                    enabled: true
                },
                maintainAspectRatio: false
            }
        });
    }

    getColor(index) {
        const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'];
        return colors[index % colors.length];
    }
}