数据可视化展示方法和系统与流程

本发明涉及金融技术领域，尤其是涉及一种数据可视化展示方法和系统。

背景技术：

近年来，互联网金融技术日益进步，数据可视化应运而生。大量枯燥乏味复杂的金融数据，通过数据可视化技术应用简单明了的图形表示出来。此外，结合大数据分析，可以在全局的角度分析数据，使展示的图形更加直观、清晰，也大大减少了人工查找、分析的时间。

目前，现有展示关系图的可视化工具很多，但缺少能够在图形上进行交互操作的可视化工具，不利于用户对信息的查看。

技术实现要素：

本发明的目的在于提供数据可视化展示方法和系统，可在图形上进行交互操作，便于用户进行信息筛选和数据查看。

第一方面，本发明实施例提供了一种数据可视化展示方法，包括：

获取投资数据，所述投资数据包括投资节点和所述投资节点间的资金流向；

通过预设渲染模型，得到投资关系图形并进行展示；

接收针对目标投资节点的第一动作指令；

根据所述第一动作指令，按照预设规则在展示的投资关系图形中隐藏与所述目标投资节点相关联的投资数据，所述预设规则根据所述资金流向和/或所述投资节点的类型预定义。

结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，其中，所述方法还包括：

获取所述目标投资节点的当前坐标位置和半径值；

调用圆弧生成器，并根据所述目标投资节点的半径值设置内径属性值和外径属性值；

根据所述当前坐标位置、所述内径属性值和所述外径属性值生成圆环菜单，以使所述目标投资节点位于所述圆环的圆心位置，其中，通过所述圆环菜单获取所述预设规则。

结合第一方面，本发明实施例提供了第一方面的第二种可能的实施方式，其中，所述方法还包括:

接收针对目标投资节点的第二动作指令；

根据所述第二动作指令，按照预设规则在展示的投资关系图形中展开与所述目标投资节点相关联的投资数据。

结合第一方面，本发明实施例提供了第一方面的第三种可能的实施方式，其中，所述方法还包括：

接收针对目标投资节点的第三动作指令；

根据所述第三动作指令，按照预设规则在展示的投资关系图形中设置所述目标投资节点以及相关联的投资数据的图像属性，所述图像属性包括投资节点坐标位置、投资节点半径值、用于表征投资节点间资金流向的线段长度、所述线段和所述投资节点的颜色。

结合第一方面，本发明实施例提供了第一方面的第四种可能的实施方式，其中，根据所述第一动作指令，按照预设规则在展示的投资关系图形中隐藏与所述目标投资节点相关联的投资数据，包括：

根据第一动作指令获取所述投资节点的节点id，通过所述节点id从数据库中找寻与所述节点id相关联的投资节点以及所述投资节点间的资金流向；

当类型相同的所述相关联的投资节点的数量大于数量阈值，且所述类型相同的所述相关联的投资节点间的资金流向一致时，将所述类型相同的所述相关联的投资节点与一致的投资节点间的资金流向作为一个集合；

按照预设规则于所述投资关系图形中隐藏所述集合中的投资数据。

结合第一方面，本发明实施例提供了第一方面的第五种可能的实施方式，其中，所述方法还包括：

接收针对目标投资节点的第四动作指令；

通过所述第四动作指令获取所述目标投资节点的当前坐标位置；

根据所述当前坐标位置设置所述目标投资节点的属性信息框的位置，所述属性信息框显示的所述目标投资节点的投资数据属性信息和/或图像属性。

结合第一方面，本发明实施例提供了第一方面的第六种可能的实施方式，其中，所述投资关系图形是可缩放矢量图形svg格式。

结合第一方面，本发明实施例提供了第一方面的第七种可能的实施方式，其中，在获取投资数据之前，还包括：

获取节点介度值范围；

在数据库中搜寻介度值在所述介度值范围内的节点，所述介度值用于表征所述投资节点的资金流的条数；

获取所述介度值在所述介度值范围内的节点的投资数据。

结合第一方面，本发明实施例提供了第一方面的第八种可能的实施方式，其中，根据所述第三动作指令，按照预设规则在展示的投资关系图形中设置所述目标投资节点以及相关联的投资数据的图像属性，包括：

按照所述节点的介度值大小设置所述投资节点的半径大小。

第二方面，本发明实施例还提供一种数据可视化展示系统，包括：

获取模块，用于获取投资数据，所述投资数据包括投资节点和所述投资节点间的资金流向；

展示模块，用于通过预设渲染模型，得到投资关系图形并进行展示；

接收模块，用于接收针对目标投资节点的第一动作指令；

动作模块，用于根据所述第一动作指令，按照预设规则在展示的投资关系图形中隐藏与所述目标投资节点相关联的投资数据，所述预设规则根据所述资金流向和/或所述投资节点的类型预定义。

本发明实施例提供了一种数据可视化展示方法和系统，根据预设渲染模型以及投资数据中的投资节点和投资节点间的资金流向，得到投资关系图形，再根据接收到的针对目标投资节点的第一动作指令，在投资关系图形中按照资金流向和/或投资节点的类型预定义的预设规则对目标投资节点相关联的投资数据进行隐藏，并将相应投资数据隐藏后的投资关系图形进行展示。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种数据可视化展示方法流程图；

图2为本发明实施例提供的一种投资关系图形示意图；

图3为本发明实施例提供的另一种投资关系图形示意图；

图4为本发明实施例提供的一种圆环菜单示意图；

图5为本发明实施例提供的一种数据可视化展示装置的结构示意图；

图6为本发明实施例提供的一种数据可视化展示系统的功能模块图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

目前，通过数据可视化方法得到的数据关系图都无法在图上进行交互操作，使得当面对数据繁多的金融领域时，数据关系图经常出现杂乱的情况，不利于用户查看，用户也无法对数据关系图中的信息进行筛选。

基于此，本发明实施例提供的一种数据可视化展示方法和系统，可在图形上进行交互操作，便于用户进行信息筛选和数据查看。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种数据可视化展示方法进行详细介绍。

图1为本发明实施例提供的数据可视化展示方法流程图。

参照图1，数据可视化展示方法包括以下步骤：

步骤s102，获取投资数据，投资数据包括投资节点和投资节点间的资金流向；

步骤s104，通过预设渲染模型，得到投资关系图形并进行展示；

这里，根据数据可视化d3.js算法构建的预设渲染模型。在一些可能的实施例中，将获取到的投资数据中的投资节点点数据赋值给预设渲染模型中的force.nodes函数，将投资节点间的资金流向线数据赋值给预设渲染模型中的force.links函数，然后调用d3.layout.force()函数，渲染出包括理财产品投资节点和用于表征投资节点间的资金流向的连接投资节点的线段的理财产品投资关系图形。

步骤s106，接收针对目标投资节点的第一动作指令；

步骤s108，根据第一动作指令，按照预设规则在展示的投资关系图形中隐藏与目标投资节点相关联的投资数据，预设规则根据资金流向和/或投资节点的类型预定义，即预设规则可根据资金流向进行预定义、可根据投资节点的类型预定义、可根据资金流向和投资节点的类型一起进行预定义。

在实际应用的优选实施例中，根据预设渲染模型以及投资数据中的投资节点和投资节点间的资金流向，得到投资关系图形，再根据接收到的针对目标投资节点的第一动作指令，在投资关系图形中按照资金流向和/或投资节点的类型预定义的预设规则对目标投资节点相关联的投资数据进行隐藏，并将相应投资数据隐藏后的投资关系图形进行展示。

当投资关系图形中节点过多不方便查看时，可以将与目标投资节点关联的节点隐藏，由图2投资关系图形进行隐藏后的投资关系图形如图3所示。本发明实施例包括4种隐藏方式：

向上隐藏，将与该目标投资节点连接且箭头指向目标投资节点的关联投资节点以及线数据都从当前投资关系图形数据中删除，然后渲染投资关系图形，箭头指向该投资节点的关联节点与线(资金流向关系)都被隐藏；

向下隐藏，将与该目标投资节点连接且箭头指向另一个目标投资节点的关联投资节点与线数据都从当前投资关系图形数据中删除，然后渲染关系图形，与该投资节点连接并箭头指向的关联节点和线(资金流向关系)都被隐藏；

按产品隐藏，将与目标投资节点连接且另一个目标投资节点的类型是理财产品的投资节点和线数据都从当前投资关系图形数据中删除，然后渲染关系图形，与该目标投资节点连接且关联的投资节点的类型是理财产品的节点和线(资金流向关系)都被隐藏；

按客户隐藏，将与目标投资节点连接且另一个目标投资节点的类型是客户的投资节点和线数据都从当前投资关系图形数据中删除，然后渲染关系图形，与该目标投资节点连接且关联的投资节点的类型是客户的点和线(资金流向关系)都被隐藏。

为了进一步地使展示的投资关系图形更加直观，不杂乱，在获取投资数据之前，还包括以下步骤：

1.获取节点介度值范围，介度值用于表征投资节点的资金流的条数；

2.在数据库中搜寻介度值在介度值范围内的投资节点；

3.获取介度值在介度值范围内的投资节点的投资数据。

用户可自定义设置节点介度值范围，在数据库中搜索经大数据计算得出介度值的投资节点，获取在节点介度值范围内的投资节点数据及投资节点间资金流向的线数据。

这里，投资关系图形是可缩放矢量图形svg格式，不依赖分辨率，所以对投资关系图形进行缩放操作也不会失真，并且svg格式支持事件处理器，可以有更好的交互效果，可以与关系图形中任一节点进行交互。

为了进一步便于用户在投资关系图形上进行交互，所述方法还包括：

1.获取目标投资节点的当前坐标位置和半径值；

2.调用圆弧生成器，并根据目标投资节点的半径值设置内径属性值和外径属性值；

3.根据当前坐标位置、内径属性值和外径属性值生成圆环菜单，以使目标投资节点位于圆环的圆心位置，其中，通过圆环菜单获取预设规则，具体如图4所示。

这里，图4中目标投资节点-资产包，获取投资节点的坐标位置和半径值，调用圆弧生成器d3.svg.arc()函数，并根据当前投资节点的半径值设置内径属性值innerradius、外径属性值outerradius生成圆环，根据当前节点的圆心坐标值(坐标位置)设置圆环的圆心位置，使当前节点-资产包恰好处在圆环的中间位置。再使用数据data属性设置功能菜单(圆环菜单)内容，包括展开节点、收缩节点、属性、搜索相似节点四个功能。

此外，由于投资关系图形中图像较多，布设距离较为紧凑，因此，在添加自定义定制功能菜单前，先根据动作指令在目标投资节点上触发mousedown事件，以获取鼠标按下时目标投资节点的坐标位置，并mouseup事件获取鼠标松开时的坐标位置，判断两次坐标位置距离，若是距离大于距离阈值，则拖动节点时不会生成功能菜单；若是距离小于距离阈值，则触发功能菜单。但由于投资关系图形中的各个投资节点之间的相互作用力，节点位置并没有固定，所以需要先将当前节点设置为固定状态。

当根据动作指令将功能菜单隐藏后，此时节点未非固定状态；或是在显示圆环功能菜单的时候拖拽了该圆环功能菜单中心的节点，会触发功能菜单隐藏。而且在同一个关系图形中只会同时显示一个功能菜单。当当前投资节点的功能菜单还是显示状态时，触发显示另一个节点的功能菜单的同时，当前节点的功能菜单会被隐藏。

在一些可能的实施例中，为了用户仔细查看关注的投资节点的细节数据和信息，上述方法还包括:

接收针对目标投资节点的第二动作指令；根据第二动作指令，按照预设规则在展示的投资关系图形中展开与目标投资节点相关联的投资数据。

在一些可能的实施例中，为了用户能够更加直观地显示投资节点以及投资节点间的资金流向关系图像，上述方法还包括：

接收针对目标投资节点的第三动作指令；根据第三动作指令，按照预设规则在展示的投资关系图形中设置目标投资节点以及相关联的投资数据的图像属性，图像属性包括投资节点坐标位置、投资节点半径值、用于表征投资节点间资金流向的线段长度、线段和投资节点的颜色。

在一些可能的实施例中，为了用户能够更加直观的或者投资节点的属性信息，上述方法还包括：

1.接收针对目标投资节点的第四动作指令；

2.通过第四动作指令获取目标投资节点的当前坐标位置；

3.根据当前坐标位置设置目标投资节点的属性信息框的位置，属性信息框显示的目标投资节点的投资数据属性信息和/或图像属性。

具体地，接收针对目标投资节点的第四动作指令(在目标投资节点上触发mouseover事件)，根据当前投资节点id在之前获取到的投资节点点数据中进行匹配，找到对应投资节点，并获取该投资节点的属性信息。再通过mouseover事件获取投资节点的当前坐标位置，根据节点坐标位置设置属性信息框的位置，显示的当前节点的基本属性信息，也可通过操作圆环功能菜单来查看全部属性信息。

属性信息包括：节点编号、节点类型、节点类型名称、节点名称、节点介度值、持有余额、发行方式、发行方、发行开始日、到期日、起息日、付息方式、收益率、项目管理费率、产品提供方来源、本币币种、募集方式等。

其中，作为一种可选的实施方式，可按照节点的介度值大小设置投资节点的半径大小。

图2为一种投资关系图形的展开示意图，如图2所示，在投资关系图形中一个节点可代表一个理财产品，其中节点的半径大小可由节点的介度值控制，介度值是根据介度中心算法计算出来的，介度值越大代表了经过该理财产品的资金流的条数越多，即也表示该节点在理财产品风险分析中越重要。作为一种可能的实施例，可使用d3.scale.linear()函数创建一个线性比例尺，给linear.domain()函数赋值设置投资节点半径值的最大值和最小值，然后每次通过渲染模型得到关系图形前都会根据投资节点的介度值线性设置节点的半径值。即节点的介度值越大节点半径也会越大。

这里，理财产品投资节点类型包括：法人客户、个人客户、融资品、投资组合、债券、基金、信托、存款、股票、资产包等。

其中，通过节点fill()函数属性赋值时，可先判断节点类型id，然后再设置对应的颜色，以便于能够更加清晰地看出投资关系图中各个节点对应的节点类型以及各类型理财产品之间的资金流动。

此外，图2中有关联的两个理财产品投资节点之间由线段连接，而不同的线段类型代表着不同的节点关系。一种是带有箭头的实线表示理财产品的“资金流”，箭头的方向表示资金的流向；另一种是不带箭头的虚线表示理财产品的“关系流”，如客户对理财产品的持有和发行关系。线上的数字表示线段连接的两个理财产品节点之间的资金流动金额，默认的金额单位为百万。作为一种可选的实施例，线上的数字(资金流动金额)可根据相关联的两个节点的坐标位置计算出线段的角度，然后将数字旋转相应角度，达到与线段保持平行显示的效果，以便用户能够更清楚地查看数据。

为了更加迅速地实现投资节点相关联的投资数据的收缩或展开，上述实施例中步骤s108还可用以下步骤实现，包括：

1.根据第一动作指令获取投资节点的节点id，通过节点id从数据库中找寻与节点id相关联的投资节点以及投资节点间的资金流向；

2.当类型相同的相关联的投资节点的数量大于数量阈值，且类型相同的相关联的投资节点间的资金流向一致时，将类型相同的相关联的投资节点与一致的投资节点间的资金流向作为一个集合；

3.按照预设规则于投资关系图形中隐藏集合中的投资数据。

这里，有时，理财产品投资节点的数量过多，直接渲染出的展开或收缩节点可能看得并不清晰，因此，本发明实施例在渲染前对投资数据进行预先的判断处理，包括：获取节点id，通过节点id从数据库里查询，找寻到与节点id相关联的投资数据。当与节点id相关联的投资节点中节点类型相同、资金流向一致且节点数量大于一定阈值时，会将这类节点(与节点id相关联的投资数据)放入一个集合；不符合条件的投资数据不需要放入集合。再将处理过的投资数据与原投资关系图形中的投资数据合并去重，重新渲染关系图形。即在子关系图形中，一个集合是一个节点，当进行展开或隐藏操作时，可以展开或隐藏(收缩)这个集合下所有的节点，并且这些节点具备理财产品投资节点的相应功能-展开节点、收缩节点、查看属性、搜索相似节点。

本发明实施例通过对投资数据d3.js力导向图模块进行封装，可直接调用渲染模型，并以很快的速度生成投资关系图形，生成的图形不依赖分辨率，在不同的平台下都表现良好，随意缩放图形也不会失真，而且支持事件处理器，有更好的交互效果。

理财产品投资关系图形除了实现了投资数据展示的需求，同时还满足了数据分析和数据挖掘的需求。根据自定义的搜索条件，可筛选出经大数据分析后的投资数据并渲染到关系图形，直观的展示了大量投资理财产品之间的关联关系以及资金流动金额。

将大数据计算出的介度值以节点半径的大小展示出来，清晰的看出哪些理财产品资金流动比较多，方便找的风险分析的重点产品；除了根据搜索条件渲染关系图形，还可以通过对单个目标投资节点进行展开渲染，找到与该节点直接关联的节点，一级一级的展开，可以找到该理财产品节点资金的最终流向，以及流向该理财产品的资金流起点；当展开的节点过多查看不方便或者部分节点不需要时，也可以选择隐藏部分节点。

进一步，如图5所示，本发明实施例还包括一种数据可视化展示装置，为数据可视化展示方法提供设备支持，包括大数据处理模块，数据库、http服务器和浏览器，大数据处理模块可根据介度值对投资数据进行过滤筛选，并在数据库中根据节点id查询关联的投资数据，服务器根据来自浏览器的动作指令将相关联的投资数据进行相应展开、隐藏操作。

如图6所示，本发明实施例提供的数据可视化展示系统包括：

获取模块，用于获取投资数据，投资数据包括投资节点和投资节点间的资金流向；

展示模块，用于通过预设渲染模型，得到投资关系图形并进行展示；

接收模块，用于接收针对目标投资节点的第一动作指令；

动作模块，用于根据第一动作指令，按照预设规则在展示的投资关系图形中隐藏与目标投资节点相关联的投资数据，预设规则根据资金流向和/或投资节点的类型预定义。

本发明实施例提供的数据可视化展示系统，与上述实施例提供的数据可视化展示方法具有相同的技术特征，所以也能解决相同的技术问题，达到相同的技术效果。

本发明实施例所提供的数据可视化展示方法以及系统的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

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

另外，在本发明实施例的描述中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

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

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

本发明实施例还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例提供的数据可视化展示方法的步骤。

本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器运行时执行上述实施例的数据可视化展示方法的步骤。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。