欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

《数据可视化原理与实例》临摹作业(西安交大国家艺术基金数据可视化培训第15天)

程序员文章站 2024-02-13 17:18:40
...

参考教材：《数据可视化原理与实例》
参考慕课：数据可视化原理与实例（实验与教材代码略有不同，但不影响使用）
          

第一章 基于Web的数据可视化基础
第一节 数据可视化概述
第二节 HTML文档
第三节 层叠样式表CSS
第四节 JavaScript脚本、DOM
第五节 SVG矢量图

课程工作环境搭建：
推荐学习网站：w3school
推荐在线编辑调试工具：JSBin
服务器：Tomcat
编辑工具：Notepad++、Sublime、vim、VSS均可

svg
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
 

SVG 有一些预定义的形状元素，可被开发者使用和操作：
矩形 <rect>、圆形 <circle>、椭圆 <ellipse>、线 <line>、折线 <polyline>、多边形 <polygon>、路径 <path>

案例：
一个典型的带有圆角的矩形：（代码来源：W3school）

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>

</svg>

案例：箭头

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <<title>SVG箭头</title>
    </head>
    <body>
    <svg width="600px" height="600px">
          <defs>
            <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth"> 
            <path d="M0,0 L0,6 L9,3 z" fill="#00F" />
            </marker>
          </defs>
          <line x1="5" y1="5" x2="250" y2="5" stroke="#00F" stroke-width="2" marker-end="url(#arrow)" />
          <line x1="5" y1="5" x2="5" y2="250" stroke="#00F" stroke-width="2" marker-end="url(#arrow)" />
          <line x1="5" y1="5" x2="100" y2="100" stroke="#00F" stroke-width="10" marker-end="url(#arrow)" />
         </svg>

    </body>
</html>



 

相关标签： JSP

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

下一篇： 《数据可视化原理与实例》临摹作业(西安交大国家艺术基金数据可视化培训第19天)

推荐阅读