D3临摹作业(西安交大国家艺术基金数据可视化培训第16天)

最新推荐文章于 2022-06-14 22:21:40 发布

fox541

最新推荐文章于 2022-06-14 22:21:40 发布

阅读量162

点赞数

分类专栏： CG 文章标签： JSP SVG

本文链接：https://blog.csdn.net/fox541/article/details/91003241

版权

CG 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本章用JSP和SVG绘图完成简单的文字、形状的使用。

第二章基于JavaScript和SVG的绘图
第一节直方图
案例1 :用js的for循环语句绘制一组直方图
代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>使用SVG绘制简单的直方图</title>
    </head>

    <body>
    
    <svg id="mySVG" width=800 height=600>
     <!--
        <rect x="0" y="15" fill="blue">
      --> 
    </svg>

    <script type="text/javascript">
            var x=100,y=300;
            var mysvg = document.getElementById("mySVG");
            var svgrec= new Array();
            for(var i=0;i<6;i++){
                svgrec[i] = document.createElement("rect");
                mysvg.appendChild(svgrec[i]);
                var h=Math.random()*300;
                svgrec[i].outerHTML="<rect x="+(i*x)+" y="+(y-h)+" width=70 height="+(h)+" style='fill:red'>";
            }

         
    </script>
    </body>
</html>

案例2：使用SVG绘制简单的动态直方图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>使用SVG绘制简单的动态直方图</title>
    </head>

    <body>
    
    <svg id="svg01" width=800 height=600>
     <!--
        <rect x="0" y="15" fill="blue">
      --> 
    </svg>

    <script type="text/javascript">      
       var x=100,y=300;
            var svg = document.getElementById("svg01");
            var rec= new Array();
            var txt= new Array();
            for(var i=0;i<6;i++){
                rec[i] = document.createElement("rect");
                txt[i] = document.createElement("text");
                svg.appendChild(rec[i]);
                svg.appendChild(txt[i]);
                var h=Math.random()*255;
                rec[i].outerHTML="<rect x="+(80*i)+" y="+(400-h)+" width=70 height="+h+" style='fill:rgb(0,0,"+Math.floor(h)+")'/>";
                txt[i].outerHTML="<text x="+(10+80*i)+" y="+(400-h)+">"+Math.floor(h)+"</text>";
        }   
  </script>
    </body>
</html>

第二节递归二叉树

第三节树状词云