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

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

改编点

• 背景透明：background:rgb(0,0,0,0);
• 不用链接，用span，重点span标class="star"

  <div id="tagbox">
          <span class="star">Artificial intelligencespan>
          <span class="star">Machine learningspan>
          <span class="star">Pattern recognitionspan>
          <span class="star">Statisticsspan>
          <span class="star">Computer visionspan>
          <span>Computer networkspan>
          <span>Data Sciencespan>
          <span>Information Retrievalspan>
          <span>Operating systemspan>
          <span>Big Data Analysisspan>
          <span>Natural language processingspan>
          <span>Graph coloringspan>
          <span>The Internetspan>
          <span>Algorithmspan>		
          <span>World Wide Webspan>
          <span>Databasespan>
          <span>Softwarespan>
          <span>Algorithmspan>
          <span>Information technologyspan>
          <span>Mathematical optimizationspan>
          <span>blockchainspan>
          <span>Cloud computingspan>
          <span>Computer securityspan>
          <span>Image Classificationspan>
          <span>Graph Theoryspan>
          <span>Neural networksspan>
          <span>visualizationspan>
          <span>Image Processingspan>
          <span>Computer graphicsspan>
          <span>Video Communicationspan>
      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