一种在浏览器中显示三维散点图的方法及系统与流程

本发明涉及三维散点图显示领域，尤其是一种在浏览器中显示三维散点图的方法及系统。

背景技术：

三维散点图主要研究在由三个变量确定的三维空间中变量之间的关系，通常用于显示和比较数值，如科学数据、统计数据和工程数据等。能直观地反映出变量之间的数量关联趋势、疏密程度等。

通常显示三维的散点图主要通过图表工具或flash等绘制而成，在基于bs模式的系统中不能通过动态数据实时生成，显示不准确，且复用性差。

而采用bs模式显示三维散点图的技术一般是基于webgl，但是这种方式目前没有一种系统的方法来显示三维散点图，尤其是当点很多时会占用大部分内存，造成页面卡顿，且控制操作不方便。

技术实现要素：

本发明的目的在于克服现有技术的不足，提供一种在浏览器中显示三维散点图的方法及系统，本发明基于浏览器，应用范围广；根据视角变化、点的密度优化性能；服务器计算压力小；可动态显示数据，具有较强的交互性。

一种在浏览器中显示三维散点图的方法，其特征在于，它包括以下步骤：

数据处理：确定数据中的每个点在三维空间中的坐标和坐标空间的等分数；截取数据在单位范围内所有的点的集合；判断单位范围内点的缩减程度，计算的点的透明度和大小；

三维散点图的显示：将数据在三维坐标系中显示，利用给定容器将整个场景进行渲染。

一种在浏览器中显示三维散点图的方法，还包括：

生成三维坐标空间，其具体步骤为：

设定三维空间的标准长度；

判断数据是否提供整个三维空间背景颜色数据，是则采用数据提供的颜色，否则使用系统默认颜色；

判断数据中xyz三轴中min和max绝对值最大的三个数即[x1，y1，z1]，给三轴分别设置一个长度权重[xw，yw，zw]；

根据标准长度计算三轴的长度权重[xw，yw，zw]，然后根据权重分别对三轴缩放，生成坐标系中的x轴，y轴，z轴进而生成网格面。

进一步限定，所述的数据处理，其具体步骤为：

根据权重换算数据中任意点pi＝[xi，yi，zi]，(i＝1，2，3，…，n)在三维空间中的坐标ewp，若n小于系统设定默认值则采用系统默认的大小和透明度，反之则根据单位范围内的密度删减点数，直至小于等于系统设定默认值；

确定坐标空间等分数e，三维空间e等分后，每份为范围ri(i＝1,2,3,...,e)确定每个范围ri内点的基数b；

截取数据在单位范围ri内所有的点的集合datai，点集datai内点的个数为dli，计算单位范围ri内点的密度di；

根据范围ri内点密度di判断范围内的点的缩减程度：当点的密度di大于1时，范围ri内的点缩减到8；当密度di小于1且大于0.6时，范围ri内的点缩减到6；密度di小于0.6则不缩减点的个数。缩减点是将ri内的点集datai删除多余的点，而只余8个或6个；

计算范围ri内的点的透明度oi和大小si；

数据点处理成为不同透明度和大小的新的数据集。

进一步限定，所述的系统设定默认值为1000。

进一步限定，所述的坐标空间等分数e的取值为8、64和512，基数b为10。

进一步限定，所述的点的密度di的计算公式为di＝dli/b,(i＝1,2,3,…,e)。

进一步限定，所述的计算范围ri内的点的透明度oi和大小si，具体为：

其中s为点的默认大小。

进一步限定，所述的三维散点图的显示：将数据在三维坐标系中显示，将整个场景在给定的容器中渲染，渲染是以“帧”为单位，每一秒渲染最高60帧，每一帧的渲染都会获取上一帧渲染的时间。

一种在浏览器中显示三维散点图的系统，它包括：参数初始化模块、数据处理模块、三维散点图显示模块和人机交互模块；

所述的参数初始化模块，对坐标系参数、三维空间背景颜色、坐标轴和参考线进行初始化设定；

所述的数据处理模块，确定数据中的每个点在三维空间中的坐标和坐标空间的等分数；截取数据在单位范围内所有的点的集合；判断单位范围内点的缩减程度，计算的点的透明度和大小；

所述的三维散点图显示模块，将数据在三维坐标系中显示，利用给定容器将整个场景进行渲染；

所述的人机交互模块，对整个场景的缩放，实现左右360度、上下180度旋转整个场景。

本发明的有益效果是：

(1)基于浏览器，应用范围广。本发明可在任意支持html5、webgl的浏览器中使用，包括电脑端、手机端、平板端或其他智能设备(如智能相机、智能电视等)的浏览器中无需加载任意插件即可使用；

(2)根据视角变化优化性能，本发明在改变视角时，通过上一帧渲染时间平滑过渡，在视角拉近时，通过不在视角范围内的点不渲染的方式节省计算性能；

(3)根据点的密度优化性能，本发明通过计算在等分范围内点的密度，根据密度决定缩减范围内点的个数,以节省渲染性能，在最终渲染时，点的个数最大不超过4096个。由于计算机的屏幕分辨率有限，过多的点对于画面展示的意义不大，但会消耗过多的计算机资源，4096个点已经足以展示数据的可视化特性了。这在浏览器的支持范围内且不会给前端造成很大压力使得用户操作时卡顿；

(4)动态显示数据，系统基于html5编写，在渲染的时候可根据数据动态变化，不刷新页面的情况下重新渲染页面，数据可以是来源于本地，也可以是来源于ajax请求；

(5)服务器计算压力小，图像的渲染在本地执行，充分利用各用户的机器的性能，分担了服务器压力。与传统的在服务器端渲染好图片，再将图片发送给客户端不同，当用户并发较大的时候，本发明的渲染模式，大量的渲染计算在客户端，服务器端的计算压力小；

(6)具有较强的交互性，用户可以放大、缩小、旋转、平移视角，并且可以在每一个数据点上挂载点击、选中、划过等事件，使得系统有较强的交互性。

附图说明

图1为一种在浏览器中显示三维散点图的方法流程图；

图2为一种在浏览器中显示三维散点图的系统框架图。

具体实施方式

下面结合附图进一步详细描述本发明的技术方案，但本发明的保护范围不局限于以下所述。

如图1所示，一种在浏览器中显示三维散点图的方法具体包括如下步骤：

s001生成三维坐标空间：

s101初始化三维坐标空间，包括三维空间背景颜色，坐标系参数(坐标轴和网格面)。在三维空间中没有长度的标准，先设定一个标准长度l＝200，根据这个标准以及数据生成三维坐标空间：

s102：判断数据是否提供整个三维空间背景颜色数据，是则采用数据提供的颜色，否则使用系统默认颜色。

s103：获取数据中x[min,max,number],y[min,max,number],z[min,max,number]坐标轴信息:分别判断获取xyz三轴中min和max绝对值最大的三个数[x1,y1,z1],给三轴分别设置一个长度权重[xw,yw,zw]。

s104：根据标准长度l计算三轴的长度权重[xw,yw,zw]，然后根据权重分别对三轴缩放，生成坐标系中的x轴，y轴，z轴；根据三轴的数据中的number生成网格面，如x[number](表示在[0,x1]分段)：在xy轴表示的平面画出平行于y轴的按number等分的在区间[-x1,x1]内的线，与平行于x轴的等分线相交为xy网格面。

其中，权重wk＝k1/l。(k＝x、y、z)

s105：根据上述步骤，生成一个xyz三轴＝标准长度l，但分别表示[-x1,x1],[-y1,y1],[-z1,z1]的坐标系，以及根据分段数number生成的xy，xz，yz网格面(其中xz，yz面默认不显示)，最终生成三维坐标空间。

s002将接收到的数据进行一系列处理：

s201：根据权重[xw,yw,zw]换算数据中每个点的坐标(pi＝[xi,yi,zi])在三维空间中的坐标ewp：

坐标ewp＝[xwxi,ywyi,zwzi],(i＝1,2,3,…,n)。其中n为数据点的个数。

判断数据点的个数n初始化点的参数。如果n小于默认值1000,则采用系统默认的大小(默认为边长为5的立方体)和透明度(默认为1)、颜色(数据提供则采用数据提供的颜色)；如果n大于1000，则根据单位范围内的密度删减点数：

s202：确定坐标空间等分数e，三维空间e等分后，每份为范围ri(i＝1,2,3,..,e)，确定每个范围ri内点的基数b。等分数e可取值为8、64、512。本实例中等分数e取默认值为512，基数b取默认值为10。

s203：截取数据在单位范围ri内所有的点的集合datai，点集datai内点的个数为dli，计算单位范围ri内点的密度di。

密度di＝dli/b,(i＝1,2,3,…,e)。

s204：根据范围ri内点密度di判断范围内的点的缩减程度：

当点的密度di大于1时，范围ri内的点缩减到8；当密度di小于1且大于0.6时，范围ri内的点缩减到6；密度di小于0.6则不缩减点的个数。缩减点是将ri内的点集datai删除多余的点，而只余8个或6个。具体是将点集datai8或6等分，取每等分的第一个点数据。

计算范围ri内的点的透明度oi和大小si：

其中s为点的默认大小。

s205：根据上述步骤将数据点处理成为最多4096个点的不同透明度和大小(点越密集的部位点的大小越小且透明度越低)的新的数据集。

s003：基于webgl技术将经过上述处理好后的数据在初始化好的三维坐标系中显示，最后将整个场景在给定的容器中渲染。其中渲染是以“帧”为单位，每一秒渲染最高60帧，每一帧的渲染都会获取上一帧渲染的时间，使得视图能平滑的过渡，从而实现所述三维散点图的展示。

s004：与用户交互控制操作：鼠标滚轮前滚，缩小整个视图场景，当场景缩小到一定的位置时不再缩小；鼠标滚轮后滚，放大整个视图场景，同样当放大到一定的位置时不再放大；按住鼠标左键并移动，可以左右360度，上下180度旋转整个场景；按住鼠标右键并移动，可以平移整个场景；当用户控制操作时每一帧同样会获取上一帧渲染时间，使得整个视图的缩放、旋转、平移等操作能平滑的过渡，最终实现对视图场景的控制操作。

一种在浏览器中显示三维散点图的系统，它包括：参数初始化模块、数据处理模块、三维散点图显示模块和人机交互模块；

所述的参数初始化模块，对坐标系参数、三维空间背景颜色、坐标轴和参考线进行初始化设定；

所述的数据处理模块，确定数据中的每个点在三维空间中的坐标和坐标空间的等分数；截取数据在单位范围内所有的点的集合；判断单位范围内点的缩减程度，计算的点的透明度和大小；

所述的三维散点图显示模块，将数据在三维坐标系中显示，利用给定容器将整个场景进行渲染；

所述的人机交互模块，对整个场景的缩放，实现左右360度、上下180度旋转整个场景。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的方法、系统和模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

本发明所揭露的方法、系统和模块，可以通过其它的方式实现。例如，以上所描述的实施例仅是示意性的，例如，所述模块的划分，可以仅仅是一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以说通过一些接口，系统或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述分立部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例的方案目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、制度存储器(read-onlymemory，rom)、随机存取存储器(randomaccessmemory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。