矢量可视化图像与数据的自动关联研究开题报告

背景：

在如今的社会中有各式各样的信息显示，动态，静态，文本，图片等等，而svg它非常实用，适用于除照片之外的任何类型的图像。这就是设计师更频繁地使用它的原因。 SVG是一种无损格式。 这意味着它在压缩时不会丢失任何数据，呈现不同的颜色。

SVG(Scalable Vector Graphics，可升级矢量图像)是由国际www委员会 (W3C)组织为适应Intemet web应用的飞速发展需要而制定的一套基于XML语 言的可缩放矢量图形语言描述规范。SVG可在网页上显示出高质量的图形，集矢 量图形与XML优点于一身，既有矢量图形的图形文件简洁，图像品质高，可无级缩放等优点，又继承了XML的跨平台性和可扩展性。 DOM(DocumentObjectModel，文档对象模型)是由W3C组织制定的～个对 象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范。它定义了 HTML和XML文档的逻辑结构以及存取和维护文档的方法。 由于SVGI．0刚刚推出，目前的SVG图形编辑工具还很有限。而“基于DOM 的SVGWeb图形编辑系统”通过所见即所得的方式，为用户在浏览器上提供了一 个简单快捷的生成所需矢量图形的工具。该系统的设计结合了SVG、DOM标准： 首先依据SVG规范编写界面；然后，利用XML语法解析器将它们解析成内存中 的一个对象树，同时在浏览器上动态生成编辑器；最后通过可视化编辑界面的鼠标 事件来驱动脚本执行，脚本通过DOM接口对对象进行相关的操作，来实现图形绘 制、编辑、存储等所需功能。由于SVG是文本格式，因此所有代码均可在文本编辑器内完成。

目的：

矢量图是能够直接在图像中得到信息，可以很直观的看出里面的信息。鼠标点击到那个数据列表中就可以显示那个表的数据信息，比通常的表格或者单单的图像格式要更加的清楚方便。

意义：

矢量图可视化图像数据的自动关联研究的意义是在于图像中的数据和表格(或者其他的输入类型)关联在一起，可以识别图中的数据加载在表格中，表格还可以修改图中的信息，矢量图的信息也会发生变化。非常适合用于统计数据这一块的。很方便和观看。

主要研究内容：

1)实现web用户端相关功能，包括：上传svg矢量图，svg图片展示，svg图片内数据识别和提取，图片内数据表格展示，用户修改表格数据,图像根据表格数据变更而生成新的图像

2)实现svg图片内数据识别和提取相关功能，包括：处理5种以上常见类型的可视化图片（饼图、柱状图、折线图、散点图、平行坐标图等）的类型识别,各类型图表内数据提取(x轴y轴数据,图注,文本,长高等)

3)实现图片内数据表格展示的相关功能，包括：自动建立这些数据与表格数据的关联

4)实现用户修改表格数据,图像根据表格数据变更而生成新的图像相关功能，包括：

用户在生成的表格内修改相应数据后展示的svg矢量图也随之改变

预期目标：

预期完成一个以浏览器web为前端的展示和用户交互界面,用户上传svg矢量图,识别图片内可视化类型,并提取相关可视化数据,并生成可视化表格,同时用户修改表格内数据时,可视化图片也会随之相应改变.

研究方法：

1) 可行性分析：在开发本推荐系统前，分析下要用哪些技术，要用哪些软件，要实现哪些功能

2) 系统分析：在可行性分析的基础上，对具体的问题具体分析，首先，本论文需要设计的是一个基于浏览器web的矢量可视化图像与数据的自动关联系统。这个以浏览器web端为前端界面，需要用到html,css,javascript等前端技术,svg内数据提取需要充分了解svg结构组成等相关知识,以及处理图片生成svg矢量图等相关方面知识。

3) 需求分析：因为本论文是实现一个基于web端的矢量可视化图像与数据的自动关联系统。所以需要实现相应的web端功能。例如，用户上传svg矢量图并在前端展示，实现图片内可视化图表类型识别,可视化图表数据提取,生成可视化数据表格,表格svg相关联,修改表格数据可视化图表会相应改变等功能.

4) 系统测试：在完成所有系统功能后，本地运行测试相应功能是否达成预期效果,，测试系统是否可以正常运行。

步骤：

1) 查阅文献，学习相关前端后端技术知识，分析系统需要实现的功能

2) 选取设计软件。以此为基础去设计和实现相应功能。

3) 完成svg可视化图表类型识别和可视化图片数据提取。

4) 完成web端界面相关功能.

5) 完成web后端相关功能

6) 根据相关文献以及前后端设计与实现途中遇到的各种问题完成本论文

[1]董付国.Python程序设计（第2版）[M].北京：清华大学出版社,2016.

[2]HTML5 CSS3网页设计与制作 黑马程序员 2020年版 人民邮电出版社.

[3]白鱼秀.将Python作为入门程序设计语言的教学探究[J.微型电脑应用,2019,(1).

[4]吴俊杰.Python语言与javascript语言的区别吴俊杰[J.电子制作,2019,(2).

[5] 于大伟. 基于WEB的数据库应用系统优化管理解决方法[D]. 吉林大学, 2005.

[6] 李兴华, 王月清. 名师讲坛:Java Web开发实战经典基础篇(JSP, Servlet, Struts, Ajax)[M].

[7] 刘亚宾, 杨红. 精通Eclipse[M]. 北京:电子工业出版,2005.

[8]王仲，董欣，陈晓鸥．SVG一～种支持可缩放矢量图形的Web浏览语言规范． 中国图像图形学报，2000，5(i2)：1039～1049.

[9]毛勇，陈奇，俞瑞钊．XML：一种将广泛应用的数据格式描述语言．计算机应 用研究，1999，(9)：4～5.

[10]Cingil，ADogac，E Sevinc et al Dynamic Modification of XMLDocuments： External Application Invocation from XML．ACM SIGecom Exchanges，2000． 1(1)：1-6.

[11]JSuzuki，YYamamotio．Toward the Interoperable Software DesignModels： Quartet of UML，XML，DOM and CORBA In：Proceedings of the 4thIEEE International Symposium and Forum on SoftⅥ7are．EngineeringStandards Curitiba，Brazil，1999163-177.

[12]Jorge, Poco, Jeffrey, et al. Reverse-Engineering Visualizations: RecoveringVisual Encodings from Chart Images[J]. Computer Graphics Forum, 2017.[13] Li H , Wang Y , Wu A , et al. Structure-aware VisualizationRetrieval[J]. 2022.