您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识
(气泡云图片)-云的形态、水中气泡内压力分布
气泡,巨细,数据(气泡云图片)-云的形态、水中气泡内压力分布
发布时间：2020-12-06加入收藏来源：互联网点击：
在博客时代，标签云很是风行，相关话题的风行是由一堆差异巨细的词来符号的。气泡云图像也有雷同的目标，通过气泡的巨细来显示相关主题的宏观比拟。
泡泡图和泡泡图有很大的区别。气泡图需要三个维度，而气泡图只需要两个变量：主题和对应于主题的数值。
这里有一个泡泡云图的例子，用来展示某个部分员工的表示(感受直观吗！):
常用的电子艺术和高级图表不提供这种图表展示形式(可能我没有找到它？).
这张图表是用D3建造的，它被称为数据驱动文档。D3是一个提供数据可视化的Javascript库。它实际上并不泛起图表，而只是将数据与页面元素毗连起来。
让我们看看如何实现它：
1.首先界说一个html页面
d3库需要在页面中引用，直接添加到这里的标题中。
html
头
剧本src=\’ https://d3js . org/D3 . v3 . min . js \’ type=\’ text/JavaScript \’/script
/head
身体
h1D3气泡图/h1
节id=\’ graph \’/节
/body
/html
2.接下来是要害部门
通过挪用d3 API将测试数据绘制成图表，并在这里尽大概多地记下细节点。
(函数(){
//对付要显示的数据，名称是主题名称，类名是气泡样式，巨细将用于气泡巨细。
var DataSet=[]；
数据集.推送({名称：\’张三\’，种别名称：\’项目0 \’，巨细：2540 })；
数据集。推送({名称：\’李思\’，种别名称：\’项目1 \’，巨细：1234 })；
数据集.推送({名称：\’王武\’，种别名称：\’项目2 \’，巨细：456 })；
数据集。推送({名称：\’猴六\’，种别名称：\’项目3 \’，巨细：200 })；
数据集.推({姓名：\’姓赵，班级名称：\’其他\’，局限：980 })；
//沿着条理布局向下加载数据包
var JSON={ children :数据集}
//图形区域的巨细
可变直径=600；
//在id=图形的部门中建设SVG区域
var svg=d3.select(\’#graph \’)。追加(\’ svg \’)。attr(宽度、直径)。attr(高度、直径)；
//利用递归轮回包生身分层机关。发起打消排序注释并查察一下
var bubble=d3.layout.pack()。尺寸([直径，直径])。值(函数(d)){返回d . size；})
//。排序(函数(a，b) {
//返回值-(a.value – b.value)
//})。填料(3)；
//计较包机关并返回节点数组
var nodes=bubble.nodes(json)。过滤器(成果(d) {
返来。d .儿童；
})；
//绑定气泡元素和数据
var vis=svg.selectAll(\’g \’)。数据(节点)；
//界说气泡
var node=vis.enter()。附加(\’ g \’)。attr(“类”，“节点”)。attr(\’transform \’)，函数(d) { return \’translate(\’ d.x \’，\’ d . y \’)\’；})；
//绘制气泡(圆)
node.append(\’circle \’)。attr(\’r \’，函数(d){ return d . r；})//圆的半径。attr(\’class \’)，函数(d) {返回d.className})；//圆形的颜色
//将文本配置在气泡(圆圈)上
node.append(\’text \’)
下面的文字。选择全部(“平移”)//文本用平移包裹，在这里将建设两个。数据(函数(d)){返回[d.name，d . size]；})//文本下两行文本数据：主题名称和数据巨细。输入()。追加(\’ tspan\’) //这里将建设两个tspan。attr(\’x \’，函数(d，i) {//文本的程度位置，它主要暗示当前的tspan文本内容
if(isNaN(d)){
返回0-(d . length/2)* 12；
}其他{
返回0-(d.toString()。长度/2)* 6；//数字字符的宽度较短
{}
})。attr(\’y \’，函数(d，i) {//文本的垂直位置，个中I暗示平移
返回8i * 18；
})。文本(函数(d) {返回d；})；//文本内容
//鼠标悬停显示
node.append(\’title \’)。文本(函数(d) {返回d . name \’ \\ n \’ d . size；})；
})()；
这里利用了一些静态测试数据，因此您可以按照本身的需求修改数据集。
类名项在数据中界说，主要用于界说气泡的颜色。对付动态数据，尤其是当数据量难以预测时，可以利用动态计较颜色值的要领，可能从一组颜色值中轮回随机选择。
绘制气泡还可以添加直接配置气泡颜色的剧本，譬喻：
//绘制气泡(圆)
node.append(\’circle \’)。attr(\’r \’，函数(d){ return d . r；})//圆的半径。样式(“填充”，函数(d){ return“# aabbcc”；})；//圆形的颜色
本文到此结束，希望对大家有所帮助呢。
下一篇：返回列表
相关链接 |
||
| 网友回复（共有 0 条回复） |