当前位置:首页 > 编程笔记 > 正文
已解决

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

来自网友在路上 144844提问 提问时间:2023-11-11 17:36:03阅读次数: 44

最佳答案 问答题库448位专家为你答疑解惑

文章目录

  • 📚改编点
  • 📚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;}
    }
    

📚final

在这里插入图片描述

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"可视化 | 3D文字球状标签云":http://eshow365.cn/6-37812-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!