本发明涉及数据处理
技术领域：
：，尤其涉及一种将话题和关键词生成可视化图表图形的基于d3的数据可视化图形生成方法及存储介质。
背景技术：
：：目前，随着大数据时代的到来，数据的量不断激增。伴随着数据可视化在国内外如火如荼的发展，比如tableau，domo他们旨在为公司提供更好的数据分析服务，让公司做出更好的决策(businessintelligence)。在国内也不少公司正在向这一方向的服务发展。webster字典中visualization(可视化)的定义如下：1.formationofmentalvisualimages.2.theactorprocessofinterpretinginvisualtermsorofputtingintovisibleform.简单地说，可以这样理解可视化：将抽象的科学或者商业数据，用图像表示出来，帮助理解数据的意义的过程。它通常会在进行数据分析(dataanalysis)的过程中大量的使用。而关于数据可视化的重要性有如下几点：第一点是我们利用视觉获取的信息量，远远比别的感官要多的多。回顾一下，正常人有简单的五觉：视觉、听觉、嗅觉、触觉和味觉。然后通过大量的统计，显示出各个感官对信息量的接受的情况，最终的结果是视觉的对信息的接收量比剩下的四种感观信息的接收量的总和还要多。第二点是它能够帮助分析的人对数据有更全面的认识。f.j.anscombe在1973年在他的一篇论文“graphsinstatisticalanalysis”中分析散点图(scatterplot)和线性回归(linearregression)的关系里面提到图像表示对数据分析的重要性。论文中举出的例子在这里就不具体地阐述了，但是很好地解释了图像展示的重要性。第三点是人类大脑在记忆能力的限制。很多研究已近表明，在进行理解和学习的任务的时候，图文一起能够帮助读者更好的了解所要学习的内容，图像更容易理解，更有趣，也更容易让人们记住。数据可视化发展历史非常悠久，例如，笛卡尔提出的坐标系就是一个数据可视化的很好的例子，尽管展示的是数值。发展到大数据时代，数据爆炸式的增长，对数据可视化的需求是异常地高，因此，各类的数据可视化的工具应运而生，代表的有echart，highchart等，这类工具提供了传统的饼图、柱状图、曲线图等常见图形，还有气泡图、面积图、省份地图、词云、瀑布图、漏斗图等酷炫图表。这些种类繁多的图形只能满足基本的需求，但是对于更大的需求和更复杂的情况，此类的工具并不能很好的满足要求。话题抽取是近年来十分热门的研究方向，抽取出来的话题肯定是需要展示出来的，否则无法很清楚说明话题的走势。现一般做法是用各种工具，将要展示的数据复制到工具里的接口，点击下生成的按钮，然后工具会自动生成各种形状的词云图。这样的做法是可以的，各个词的大小错落有序，然而无法看清话题随着年份变化而变化。尽管在echart，highchart等有各种可视化的模型和各种图表，但是并不能找到将词放进图表中的模型，即想要找到词云图以及图表图，然后将两者拼接起来，依靠现有技术仍然无法完成。技术实现要素：针对现有技术中的问题，本发明的目的在于提供一种基于d3的数据可视化图形生成方法及存储介质，综合d3.js、图表、词云和文本读取等技术，将词云图和图表图结合起来，将词云更清晰地显示在话题的图表图形中。本发明实施例提供一种基于d3的数据可视化图形生成方法，包括如下步骤：获取待生成可视化图形的数据包，所述数据包中包括多个话题、各个话题中包括的多个关键词以及各个话题的多个维度属性值；根据所述数据包中多个话题及各个话题所对应的多个维度的属性值，绘制图表图形；调取d3.layout.cloud.js词云包，所述词云包中包括多个关键词，所述多个关键词分别对应所述多个话题；根据所述关键词与所述话题的对应关系，将各个所述关键词定位到所对应的话题在所述图表图形中的可用填充位置。可选地，所述绘制图表图形，包括如下步骤：在svg画布上绘制二维坐标轴，所述二维坐标轴的x轴对应预设的第一维度，所述二维坐标系的y轴对应预设的第二维度，所述各个话题的多个维度属性值包括各个话题的至少一个第一维度属性值，以及该话题在各个第一维度属性值下的第二维度属性值；将各个话题的第一维度属性值作为x轴变量，在各个第一维度属性值下的第二维度属性值作为对应的y轴变量，在所述svg画布上绘制该话题的变化曲线。可选地，所述第一维度和第二维度分别为年份维度和词频维度，所述图表图形为各个话题随各个年份的词频变化曲线图。可选地，所述绘制二维坐标轴，包括如下步骤：在所述svg画布上定义上下左右四个方向的边界线，形成由四条边界线围成的绘图区域，该绘图区域的宽度和高度分别为：w2＝w1-p1-p2；h2＝h1-p3-p4；其中，w1和h1分别为所述svg画布的总宽度和总高度；p1、p2、p3、p4分别为左边界、右边界、上边界和下边界与所述svg画布的左边缘、右边缘、上边缘和下边缘之间的间距值；w2和h2分别为所述绘图区域的宽度和高度；定义x轴的宽度和y轴的高度分别为所述绘图区域的宽度和高度；将选取的年份值作为离散点平均映射到所述x轴上；计算所述数据包中的最大词频值fremax，将(0，fremax*k)范围的数据作为连续数据平均映射到所述y轴上，其中k值为预设扩展系数。可选地，所述绘制图表图形，还包括如下步骤：将各个话题所对应的变化曲线与所述x轴之间的区域与多种颜色建立一一对应关系，并将各个变化曲线与所述x轴之间的区域涂上对应的颜色；将各个话题所对应的变化曲线与多种颜色建立一一对应的颜色，并将各个变化曲线涂上对应的颜色。可选地，将各个变化曲线与所述x轴之间的区域涂上对应的颜色时，计算各个变化曲线与所述x轴之间的平均距离值，根据各个变化曲线的平均距离值进行排序，按照平均距离值由大到小的顺序，在所对应的区域涂上对应的颜色。可选地，所述绘制图表图形，还包括如下步骤：为各个话题所对应的变化曲线添加说明标签，所述说明标签中包括所对应话题的说明信息；对所述x轴和所述y轴添加文字描述，并给整个图表图形添加描述性文字。可选地，所述调取d3.layout.cloud.js词云包，包括如下步骤：采用d3.layout.cloud()函数调用d3.layout.cloud.js词云包；在所述d3.layout.cloud.js词云包中添加各个关键词的显示属性；根据各个关键词的显示属性将各个所述关键词定位到所对应的话题在所述图表图形中的可用填充位置。可选地，所述各个关键词的显示属性包括各个关键词的显示区域范围、旋转角度、数据绑定指令、显示字体、添加关键词指令和结束指令中的至少一种。可选地，所述各个关键词的显示属性包括显示字体，所述词云包中包括各个所述关键词的词频，所述关键词的词频与显示字体的大小成正比。可选地，所述第一维度和第二维度分别为年份维度和词频维度，所述图表图形为绘制于二维坐标轴中，各个话题随各个年份的词频变化曲线图；所述将各个所述关键词定位所述可用填充位置，包括如下步骤：确定各个所述关键词所对应的话题；将各个所述关键词填充到所对应的话题的词频变化曲线与年份坐标轴之间的区域中。可选地，所述图表图形中，各个区域的大小与各个区域中放置的词的个数成正比。本发明实施例还提供一种存储介质，用于存储程序，其中所述程序被执行时进行如下操作：获取待生成可视化图形的数据包，所述数据包中包括多个话题、各个话题中包括的多个关键词以及各个话题的多个维度属性值；根据所述数据包中多个话题及各个话题所对应的多个维度的属性值，绘制图表图形；调取d3.layout.cloud.js词云包，所述词云包中包括多个关键词，所述多个关键词分别对应所述多个话题；根据所述关键词与所述话题的对应关系，将各个所述关键词定位到所对应的话题在所述图表图形中的可用填充位置。本发明所提供的基于d3的数据可视化图形生成方法及存储介质具有下列优点：本发明综合d3.js、图表、词云和文本读取等技术，生成词云和话题的图表图形，并且将词云和话题的图表图形结合起来，将要展现出的词云分别定位到图表图形中相应的位置，将词云更清晰地显示在话题的图表图形中；进一步可以将年份和词频作为话题的图表图形的两个维度，更好地展现出话题随年份变化的情况，通过图文结合，更好地帮助用户获取相关的有用信息。附图说明通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显。图1是本发明一实施例的基于d3的数据可视化图形生成方法的结构示意图；图2是本发明一实施例的绘制图表图形的流程图；图3是本发明一实施例的各个话题的变化曲线图的示意图；图4是本发明一实施例的调取d3.layout.cloud.js词云包的流程图；图5是本发明一实施例的将词云包填充到图3中的图形后的示意图。具体实施方式现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的实施方式；相反，提供这些实施方式使得本发明将全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的结构，因而将省略对它们的重复描述。为了实现上述发明目的，本发明实施例提供一种基于d3的数据可视化图形生成方法。d3(data-drivendocument，被数据驱动的文档)，即d3.js。d3.js是一个javascript库，它可以通过数据来操作文档。d3.js可以通过使用html、svg和css把数据鲜活形象地展现出来。d3.js严格遵循web标准，因而可以让用户的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作dom。如图1所示，所述基于d3的数据可视化图形生成方法包括如下步骤：s100：获取待生成可视化图形的数据包，所述数据包中包括多个话题、各个话题中包括的多个关键词以及各个话题的多个维度属性值；s200：根据所述数据包中多个话题及各个话题所对应的多个维度的属性值，绘制图表图形；图表图形可以包括条形图、柱形图、曲线图和饼图等，其中各个话题可以分别对应一个条形、一个柱形、一条变化曲线或一个圆形，用来表示各个话题的多个维度的变化情况，从而将话题的变化状态用数据可视化的图表图形表示出来。s300：调取d3.layout.cloud.js词云包，所述词云包中包括多个关键词，所述多个关键词分别对应所述多个话题；s400：根据所述关键词与所述话题的对应关系，将各个所述关键词定位到所对应的话题在所述图表图形中的可用填充位置。通过将关键词定位到图表图形中的可用填充位置，实现了将词云和图表图形结合起来的目的，从而实现了词云的可视化，可以提供更多视觉的信息，帮助用户更有效地获取相关内容。如图2～3所示，本发明一实施例优选采用曲线图作为图表图形来说明本发明的一种实施方式。然而在实际应用中，并不限于采用曲线图，其他采用条形图、柱形图等等图表图形的实施方式也属于本发明的保护范围之内，只是因为图表图形类型不同，展示的效果也不尽相同，关键词的填充方式也不尽相同，但均能够实现本发明的数据可视化的目的。如图2所示，在该实施例中，所述绘制图表图形，包括如下步骤：s201：在svg画布上绘制二维坐标轴，所述二维坐标轴的x轴对应预设的第一维度，所述二维坐标系的y轴对应预设的第二维度，所述各个话题的多个维度属性值包括各个话题的至少一个第一维度属性值，以及该话题在各个第一维度属性值下的第二维度属性值；s202：将各个话题的第一维度属性值作为x轴变量，在各个第一维度属性值下的第二维度属性值作为对应的y轴变量，在所述svg画布上绘制该话题的变化曲线。如图3所示，进一步地，所述第一维度和第二维度分别为年份维度和词频维度，所述图表图形为各个话题随各个年份的词频变化曲线图。即图3中示出的各个话题“电影”、“书刊”和“电视剧”随时间的词频变化曲线图。在不一样的年份，各个话题的词频可能会发生变化，由此产生变化曲线的上下起伏。对于曲线图表，x，y轴数据的输入，是以.json格式存储，且其数据的格式为每组数据都有两个元素，name和data，name代表了话题的种类，元素data中每组数据代表了年份和词频。在此基础上，所述绘制二维坐标轴，包括如下步骤：(1)首先定义svg画布的长宽，长宽值可以根据要展示的数据的大小来具体设置，没有具体要求，另外，为了使得图形看起来更美观，对画布又增加了边界的定义。即在所述svg画布上定义上下左右四个方向的边界线，形成由四条边界线围成的绘图区域，该绘图区域的宽度和高度分别为：w2＝w1-p1-p2；h2＝h1-p3-p4；其中，w1和h1分别为所述svg画布的总宽度和总高度；p1、p2、p3、p4分别为左边界、右边界、上边界和下边界与所述svg画布的左边缘、右边缘、上边缘和下边缘之间的间距值；w2和h2分别为所述绘图区域的宽度和高度；(2)定义x轴的宽度和y轴的高度分别为所述绘图区域的宽度和高度；(3)先对x轴进行比例尺转换，因为是年份的关系，认为其值为离散值，所以用到d3.scale.ordinal()函数，例如选取1998年到2014年之间的区间，将(1998-2014)的值平均映射到x轴上；(4)d3.js是在.js基础上开发出来，来更好地要展现的数据，所以语法规则，内置的package在d3.js的环境下，仍然是可以使用的。因此可以用了一个for循环，找出每组数据中词频的最大值。求出这个最大值可以通过比例尺的函数将真实的大小转换到画布上更加地合理。即计算所述数据包中的最大词频值fremax，将(0，fremax*k)范围的数据作为连续数据平均映射到所述y轴上，其中k值为预设扩展系数，可以适当选取一个大于1的系数，使得y轴相对于最大词频值有一定的冗余值。对于y轴，可以认为词频是连续分布，然后用到线性比例尺转换，由于画布svg定义了点得坐标是相对于画布svg左上角的点计算的，例如k值可以选取为1.05，所以y轴的定义域设置为domain[0，fremax*1.05]，值域range【height-padding.top-padding.bottom，0】。进一步地，为了更清楚地显示各个话题的变化曲线图，将曲线之间的区域涂抹上颜色，每一块由不同的颜色来进行区分。因此在所述svg画布上绘制该话题的变化曲线之后，还可以包括如下步骤：s203：将各个话题所对应的变化曲线与所述x轴之间的区域与多种颜色建立一一对应关系，并将各个变化曲线与所述x轴之间的区域涂上对应的颜色；此处可以先用d3.scale.category20()函数生成20种颜色，在实际应用中，不限于采用20种颜色，采用其他数量也可以。对于区域颜色的涂抹，一般是这样操作，用到d3.svg.area()函数，函数里定义.x()，.y0()，.y1()三个参数，.x()，y0()代表了曲线的一条路径，.y1()表示的x轴的位置。对于区域颜色要设置的稍微透明点，这里设置的为0.4。s204：将各个话题所对应的变化曲线与多种颜色建立一一对应的颜色，并将各个变化曲线涂上对应的颜色。在该实施例中，首先定义区域的颜色，然后定义变化曲线的颜色，可以避免曲线的轮廓被曲线颜色所遮挡，影响显示效果。可以用d3.svg.line()函数来定义函数，下面添加的属性.x()，.y()代表的是曲线上面的点，定义完了曲线之后，绑定数据，并且添加曲线颜色，透明度等属性。进一步地，由于各个变化曲线和x轴之间的区域存在较多的重合部分，为了更好地进行区别显示，按照各个区域从高到低的顺序依次涂色。即将各个变化曲线与所述x轴之间的区域涂上对应的颜色时，计算各个变化曲线与所述x轴之间的平均距离值，根据各个变化曲线的平均距离值进行排序，按照平均距离值由大到小的顺序，在所对应的区域涂上对应的颜色。进一步地，在图形绘制完成后，为了更清楚地说明各条曲线表达的含义，还可以包括如下步骤：s205：为各个话题所对应的变化曲线添加说明标签，所述说明标签中包括所对应话题的说明信息；并且可以添加能给人识别大小的矩形的元素，在这里大小设置为12，颜色随曲线的颜色。然后在矩形的后面添加文字说明。如图3中的示例，在每条曲线后面相应增加了“电影”、“书刊”、“电视剧”的话题标签，以说明该话题代表的含义。s206：对所述x轴和所述y轴添加文字描述，并给整个图表图形添加描述性文字。对于整张图的标题和x轴的说明，只需要添加svg.append(“text”)，然后添加文字的位置属性，通过计算，正确的放在文字该在的位置。对于y轴的文字的说明，应为是竖起来放置，因此比标题和x轴多一个属性attr("transform","rotate(-90)")。图2中示出的绘制图表图形的方法和图3中示出的图表图形仅为本发明的一种可选实施方式，在实际应用中，可以选用其他的方式，而不以此处示出的为限。例如，为了图表图形简洁，可以不增加填充颜色或不增加说明文字，填充颜色也可以采用不同的方式等等；图3中仅示出了三个示例话题，在实际应用中，提取的话题因实际应用不同而随之变更，数量也不限于三个，也可以不设置画布内部的边界，而将x轴和y轴填满整个画布；另外，预设扩展系数也不限于采用1.05，其他大于1的系数均可以，例如1.2，1.3等等，但不宜取的过大，取值过大会使得图表上方有大量空白，造成画布的浪费。因此，在本发明主要构思范围之内所进行的各种变更，均属于本发明的保护范围之内。对于d3.js读取文件的函数有几种，针对json文件的d3.json()函数，针对csv文件的d3.csv()函数，针对txt文件的d3.text()函数。在该实施例中，提供数据来源的是txt文本，所以用的是d3.text()函数,然后将读取来的数据存到filename变量中。对于读取到的数据第一步骤是，现将读取的数据分成几簇词，对于每一簇词的处理办法先定位在画布上一个位置，然后以这个位置为中心，设置一个半径，加个随机数，这一簇的词中每个位置会出现在这个圆内的任何一个位置。虽然这样达到了显示效果，但是有个缺陷，词少点出现词相互重叠的情况很少，但是这簇词一多，那重叠的几率大大的变大，很多时候大大影响视觉效果，尽管会根据词的权重使词的大小错落有序，但是重叠的情况，有的词确实不容易看清楚。鉴于这样的问题，本发明实施例引入了d3.layout.cloud.js词云包，可以很好地解决词之间重叠的问题。如图4所示，所述调取d3.layout.cloud.js词云包，包括如下步骤：s301：采用d3.layout.cloud()函数调用d3.layout.cloud.js词云包；s302：在所述d3.layout.cloud.js词云包中添加各个关键词的显示属性；s303：根据各个关键词的显示属性将各个所述关键词定位到所对应的话题在所述图表图形中的可用填充位置。可选地，所述各个关键词的显示属性包括各个关键词的显示区域范围、旋转角度、数据绑定指令、显示字体、添加关键词指令和结束指令中的至少一种。例如，首先添加关键词的属性size()，表示的是关键词在图表图形中占据的位置大小0；然后添加属性.word()，将读取的数据放到这个函数里面，即绑定数据，添加.rotate()属性，表示的是词的旋转角度，这里的需求可以设置为0或其他需要的角度，如果省略这个属性，可能会出现一定问题，因为省掉依然会有一定的概率出现重叠情况；然后添加.font()和.fontsize()两个属性，表示的字体和字体大小；添加属性.start()，表示开始该布局的函数；最后添加.on(“end”,draw)这个属性，在词云包中，.on()表示的是注册指定的侦听器以从布局接收指定类型的事件，目前，只支持“单词”和“结束”事件。此处表示的是当布局完成尝试放置所有单词时，将调度“结束”事件，调用draw函数。draw函数中依然是要在该画布上进行，否则无法显示在一起。同时在这个函数里可以定位这一词云的位置。然后针对各个关键词的情况，对其他属性设置，达到需要的显示效果。进一步地，可以根据各个关键词的重要性来调整显示效果，即突出显示更加重要的关键词。例如所述词云包中包括各个所述关键词的词频，所述关键词的词频与显示字体的大小成正比。另外，也可以设置不同的关键词的词频采用不同颜色来显示，例如重要的关键词采用红色字体，可以达到醒目的效果等等。此处关键词的词频与显示字体的大小成正比可以是词频值和显示字体的字号值成正比。例如，设置词频小于10次时，字号为8号，词频介于10次和40次之间时，字号为10号，词频大于40次时，字号为12号。此处仅为举例，实际可以采用不同的设置，划分为多个等级，对应设置不同的字号等等。如上所述，所述第一维度和第二维度可以分别为年份维度和词频维度，所述图表图形为绘制于二维坐标轴中，各个话题随各个年份的词频变化曲线图；所述将各个所述关键词定位所述可用填充位置，包括如下步骤：(1)确定各个所述关键词所对应的话题；(2)将各个所述关键词填充到所对应的话题的词频变化曲线与年份坐标轴之间的区域中。如图5所示，示出了在图3中的图表图形中进一步增加词云后的示意图。例如对于话题“电影”来说，有关键词“武侠”、“剧情”、“文艺”和“动作”，而“剧情”的词频又最高，因此将“剧情”采用较大字体突出显示。此处各个话题下面所对应的关键词仅为举例。在实际应用中，各个话题下面可以有多个关键词，关键词的排放可以是均匀排放，根据曲线之间的空的可用填充区域大小来分布，区域大的可以多放些关键词，区域小的可以少放些关键词，以使得整体显示图形美观。即可选地，所述图表图形中，各个区域的大小与各个区域中放置的词的个数成正比。本发明实施例还提供一种存储介质，用于存储程序，其中所述程序被执行时进行如下操作：获取待生成可视化图形的数据包，所述数据包中包括多个话题、各个话题中包括的多个关键词以及各个话题的多个维度属性值；根据所述数据包中多个话题及各个话题所对应的多个维度的属性值，绘制图表图形；调取d3.layout.cloud.js词云包，所述词云包中包括多个关键词，所述多个关键词分别对应所述多个话题；根据所述关键词与所述话题的对应关系，将各个所述关键词定位到所对应的话题在所述图表图形中的可用填充位置。该存储介质可以设置于各种硬件设备中，例如设置于电脑、移动终端等具有处理器的设备中，也可以设置于单纯的存储器，例如移动硬盘、u盘、光盘等中，从而实现在被内置或外置的处理器执行时，执行上述程序。本发明所提供的基于d3的数据可视化图形生成方法及存储介质具有下列优点：本发明综合d3.js、图表、词云和文本读取等技术，生成词云和话题的图表图形，并且将词云和话题的图表图形结合起来，将要展现出的词云分别定位到图表图形中相应的位置，将词云更清晰地显示在话题的图表图形中；进一步可以将年份和词频作为话题的图表图形的两个维度，更好地展现出话题随年份变化的情况，通过图文结合，更好地帮助用户获取相关的有用信息。以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属
技术领域：
：的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。当前第1页12当前第1页12