可视化 | 3D文字球状标签云

文章目录

📚改编点
📚final

改编自echarts 3d词云（指向滑动、拖动、缩放、点击、自转）

📚改编点

背景透明：background:rgb(0,0,0,0);

不用链接，用span，重点span标class="star"

<div id="tagbox">
        <span class="star">Artificial intelligence</span>
        <span class="star">Machine learning</span>
        <span class="star">Pattern recognition</span>
        <span class="star">Statistics</span>
        <span class="star">Computer vision</span>
        <span>Computer network</span>
        <span>Data Science</span>
        <span>Information Retrieval</span>
        <span>Operating system</span>
        <span>Big Data Analysis</span>
        <span>Natural language processing</span>
        <span>Graph coloring</span>
        <span>The Internet</span>
        <span>Algorithm</span>		
        <span>World Wide Web</span>
        <span>Database</span>
        <span>Software</span>
        <span>Algorithm</span>
        <span>Information technology</span>
        <span>Mathematical optimization</span>
        <span>blockchain</span>
        <span>Cloud computing</span>
        <span>Computer security</span>
        <span>Image Classification</span>
        <span>Graph Theory</span>
        <span>Neural networks</span>
        <span>visualization</span>
        <span>Image Processing</span>
        <span>Computer graphics</span>
        <span>Video Communication</span>
    </div>

#tagbox span{
    position:absolute;
    padding:3px 3px;
    font-family:Microsoft YaHei;
    TOP:0px;
    font-size: 14px;
    font-weight:bold;
    text-decoration:none;
    left:0px
}

js修改点：区分star和普通span——颜色and大小

function doPosition()
{
	var l = oDiv.offsetWidth/2;
	var t = oDiv.offsetHeight/2;
	for(var i = 0;i<mcList.length;i++)
	{
		aA[i].style.left = mcList[i].cx + l - mcList[i].offsetWidth/2+'px';
		aA[i].style.top = mcList[i].cy + t - mcList[i].offsetHeight/2+'px';
		// 设置 "star" 类的标签样式
        if (aA[i].classList.contains('star')) {
            aA[i].style.color = '#e60012';
            aA[i].style.fontSize = Math.ceil(18 * mcList[i].scale/2) + 8 + 'px';
          }
		else{
            aA[i].style.color = '#2c2f3b';
            aA[i].style.fontSize = Math.ceil(12 * mcList[i].scale/2) + 8 + 'px';
        }
		aA[i].style.filter="alpha(opacity = " + 100 * mcList[i].alpha+")";
		aA[i].style.opacity = mcList[i].alpha;
	}
}