svg在线画图-在线绘图|凌波微课云平台搞定venn图

栅格图形

,也叫做点阵图,位图(bitmap),像素图,图像是由像素构成的,像素的多少将决定图像的显示质量和文件大小,图像的分辨率越高,其显示越清晰,文件所占的空间也就越大。图像放大时会失真,可以看到整个图像是由很多像素组合而成的。

矢量图形

使用 XML 来描述二维图形和绘图程序,矢量图像在放大或改变尺寸的情况下其图形质量不会有所损失。

<canvas>和<svg>都是HTML5推荐使用的图形技术,Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图形;SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line …),还有完整的动画,事件机制,本身就能独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,目前的稳定版本是1.1 C Scalable Vector Graphics (SVG) 1.1 (Second Edition) ,两者的主要特点见下面的表格:

SVG

Canvas

图形和图表

svg和Canvas都可以表现图表(如柱状图, 散点图, 饼图等等),常用的图形图表库中,百度的echarts是基于Canvas实现的,D3是基于svg实现的。

xmlns属性可定义SVG 命名空间(如果将SVG内嵌在HTML页面中并作为该页面提供,则不需要xmlns属性)。

使用 <g> 元素,可以对多个元素进行分组

path元素是SVG基本形状中功能最强大的一个,它不仅能创建其他基本形状,还能创建更多其他形状。你可以用path元素绘制矩形(直角矩形或者圆角矩形)、圆形、椭圆、折线形、多边形,以及一些其他的形状,例如贝塞尔曲线、2次曲线等。

path元素的形状是通过属性d来定义的,属性d的值是一个“命令+参数”的序列。

下面的命令可用于路径数据:(命令详情可查看 )

viewBox的四个参数分别代表:最小X轴数值;最小y轴数值;宽度;高度。

用于svg整体缩放

表示虚线描边。可选值为:none, <dasharray>, inherit. 其中,none表示不是虚线;<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。

表示虚线的起始偏移。可选值为:<percentage>, <length>, inherit. 百分比值,长度值,继承。

如果stroke-dasharray值很大,超过了描边路径的总长度,加以css动画改变stroke-dashoffset值,就会出现一段时间内描边显示从无到有。

画矢量图的软件如下:

1、Pixso的矢量设计功能,非常适合没有任何基础的人群,它特有的画板工具、钢笔工具以及智能操作等等,利于理解。

2、mastergo是一款可跨平台在线使用的矢量设计软件,当然在协作交付方面mastergo也是有着优异的表现。

3、蓝湖是一款产品文档和设计图的共享平台,并且能够帮助企业团队更好的管理文档和设计图等相关文档。

4、Sketch是一款功能轻便并且能够满足UI设计师日常所需的矢量设计软件。

5、AdobeXD是一款适用于网站和应用程序等的快速且功能强大的UI/UX设计解决方案。

1.  背景介绍

韦恩图(Venn diagram),是用于展现集合之间大致关系的一类图形,常见于多个或多组样本共有或特有信息的可视化展示。其中,圆形或椭圆形重合部分(overlap区域)就是集合与集合元素的交集(共有部分),非重叠部分即为特定集合的特有元素(独有部分)。韦恩图常用于微生物组研究(扩增子测序、宏组学研究)及转录组相关研究中。

2.  操作方法

操作界面

2.1.  参数设置

l 展示模式(Display mode): Arial或Sens-seirf

l 字体选择(Font family):Arial  或Sens-seirf  或Serif 或Monospace

l 字体大小(Font size):8px  9px  10px  11px  12px  13px  14px

l 是否需要根据统计列表显示统计信息:是 或 否

l 是否显示开关按钮面板(如提供三个以上列表):是 或 否

l 是否用问号(?)代替交叉点计数大小:是 或 否

l 选择列表中的元素: 输入元素名

2.2.  信息上传

有三种文件录入方式进行VENN图的绘制:

2.2.1. 直接粘贴:将对应每个分组(样品名或分组名)中包含的元素直接粘贴到对应的List列表中;在对应样品名或分组名的文本框中,可直接修改样本名/分组名。如下图示:

数据上传后,将在左侧做图框,直接展现venn图及对应列的统计柱状图:

2.2.2. 单文件上传(适用于一组内只有一个样本的分析):

第一步:定义上传参数

> 分隔方式: 制表符;逗号;分号

>使用第一行作为标题:是   否

第二步:浏览并选择文件:这里的文件格式为txt格式,首行为样本名/分组名,每列为对应样本名/分组名包含的元素信息。如图示:

数据上传后,将在左侧做图框,直接展现venn图及对应列的统计柱状图:

2.2.3. 元素文件及分组文件上传(适用于一组包含多个样本信息的分析)

第一步:上传元素列表。这里的文件格式为txt格式,首行为样本名/分组名,每列为对应样本名/分组名包含的元素信息。如图示:

第二步:上传分组列表。这里的文件格式为txt格式,每一行为一组,一行内包含每组的每个样本名称信息,样本间可以用逗号分隔开,如图示:

数据上传后,将在左侧做图框,直接展现venn图及对应列的统计柱状图

2.3. 作图调整

2.3.1. 颜色调整:点击对应分组名或样本名后的色块,可以直接调整该列显示的作图颜色,点击选择颜色,对应列展示的颜色会自动调整为选择的颜色:

2.3.2. 元素构成展现:

在Venn图中点击对应色块位置,会在左下方提示框中显示该色块内包含的元素构成

2.4.  结果导出:

点击Venn 图右上角按钮,可以选择以PNG、SVG或CSV列表格式导出venn图分析图片及分析结果列表。

其中CSV列表中,包含全部样本组的共有与特有元素信息,如图示(局部):