首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端数据可视化之 --- (一)亿级关系图

(D3是肯定可以的了),与其用D3从零开始为什么不找到现有的开源的专门做关系图的库,来实现它,百度了半天也没搜出个一支半截,最终还是看了某查网,发现它们引入了一个叫cytoscape.js的文件,百度了一下...(官网:http://js.cytoscape.org/) 描述 Cytoscape.js is a fully featured graph theory library....使用方法很简单,一个div用于盛装画好的图,先引jquery,再引Cytoscape.js,然后就可以开始写你的代码了,还支持使用npm安装。...包含一些设置图布局的属性 name: 'breadthfirst',//用哪种方式排列,可选:breadthfirst(广度优先)、cose(缝制,乱交)、preset(预设)、circle(圆形...").removeClass("edgeActive"); c.neighborhood("edge").addClass("edgeActive");//鼠标经过某节点,与此节点有关的变高亮显示

3.8K21

大数据分析:数据可视化图形库(1)

Alchemy.js: 内置d3中的JavaScript图形绘图应用程序,用于启动和运行图形可视化应用程序。...它以圆形布局可视化数据。 Cola.JS: 根据MIT许可证发行的开源JavaScript库,用于使用基于约束的优化技术来排列HTML5文档和图表。...Cytoscape.js: 一个用纯JS编写的图形库,在生产中的商业项目和开源项目中使用,并且首先面向用户(面向前端应用程序用例和开发人员用例)设计。...Dagre-d3: JavaScript库,用于客户端布置有向图。 Dash Cytoscape: Dash的组件库,旨在利用Python进行网络可视化,并包装在Cytoscape.js中。...Dracula: JavaScript库,用于显示和布局交互式连接的图形和网络,以及图形理论领域的各种相关算法。

1.7K30

知识图谱项目前端可视化图论库——Cytoscape.js简介

之前的两个图谱demo项目中我一直是使用的D3.js这个前端最流行的可视化图库。...D3.js也是比较强大的图库,但是它提供的API都是偏底层的,文档也不友好,比较难上手,实现一个简单的功能也需要大量的代码,编码效率并不是很高,各个版本之间兼容性也很差,并且使用SVG渲染画布大量节点显示的时候有性能瓶颈...官方介绍 Cytoscape.js是一个用原生JS编写的开源图论(又名网络)库。你可以使用Cytoscape.js进行图形分析和可视化。 Cytoscape.js允许你轻松显示和操作丰富的交互式图形。...由于Cytoscape.js允许用户与图形进行交互,并且库允许客户端挂接到用户事件,因此Cytoscape.js可以轻松集成到你的应用程序中,尤其是因为Cytoscape.js支持桌面浏览器(例如Chrome...你可以Node.js上无头使用Cytoscape.js终端或Web服务器上进行图形分析。 Cytoscape.js支持许多不同的图论用例。

4.9K50

​Flutter | 一个关于背景颜色引发的打脸惨案

起因 有个小伙伴群里问了这样一个问题: PopupMenuButton 怎么改背景色? 这不正好撞枪口上了么,刚写完 PopupMenuButton 的文章,这个逼必须得装。 ?...canvas, /// 圆形边缘,卡片主题颜色。 card, /// 默认情况下没有颜色的圆(用于浮动操作按钮)。...circle, /// 圆形边缘,默认情况下没有颜色(用于[MaterialButton]按钮)。 button, /// 一块透明的材料,用于绘制喷墨和高光。...虽然材料隐喻描述了打印材料本身上的子部件,但不隐藏墨迹效 果,但实际上[Material]小部件将子部件绘制墨迹效果的顶部。...具有类型透明度的[材质]可以放置 不透明小部件的顶部,以在其顶部显示墨迹效果。首选使用[ink]小部件不透明小部件上显示墨迹效果。

1.5K30

nicegui布局细节补充——绝对定位,固定定位

首先我们通过一个非常规界面,学习基础原理: 上图的圆形看起来像嵌入到卡片的头部 然后会学习制作许多内容网站中常见的"回到顶部" 浮动按钮。...只滚动到指定位置才出现 点击按钮,即可立刻回到页面顶部,并且按钮消失 本节使用的 nicegui 版本为 1.4.21 绝对定位 专栏惯例:先说原理细节,再给出一个封装好的便捷方法。...但我们希望数字图案可以脱离这种规则,它可以很容易放置容器(卡片)任意角落。...卡片上方的空白,是我们设置的 padding 但是,定位的是元素左边缘和上边缘,现在我们希望元素本身往左边移动自身宽度的一半。...但是现在需求还没有完成,圆形图标怎么可以往上移动,而又刚好放到卡片上边缘一半的地方? 从卡片里面往上移动,确实不好做。因为卡片有内边距。其实有许多实现方式,这里只说一种,另一种我放到源码里面。

51110

带你领略 ConstraintLayout 1.1 的新功能前言带你领略 ConstraintLayout 1.1 的新功能

spread:均匀分配链中的所有视图 spread_inside:将第一个元素和最后一个元素放置边缘上,并均匀分布其余元素 packed:将元素包裹在链条的中心 屏障 如果您有几个视图会在运行时更改大小...布置国际化字符串或显示用户生成的无法预测大小的内容时,屏障非常有用。 ? image 屏障允许您通过几个视图来创建一个约束。 屏障将始终将自己置于虚拟群组之外,并且您可以使用它来限制其他视图。...profile.visibility = GONE profile.visibility = VISIBLE 圆形约束 约束布局中,大多数约束由屏幕尺寸指定——水平和垂直。...约束布局 1.1 版本中,有一个新的类型约束 constraintCircle,它允许您指定沿着一个圆形进行约束。您不必提供水平和垂直边距,而是指定圆的角度和半径。...创建圆形约束时,请注意,角度从顶部开始并顺时针进行。

1.7K20

Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

尺寸 默认值:56 x 56dp 最小:40 x 40dp ---- 悬浮响应式按钮 悬浮响应式按钮 浮动操作按钮用于促进操作,悬浮响应式按钮是由UI上方浮动的圆形icon来区分的,它们的运动行为包括变色...左:默认尺寸    右:最小尺寸 悬浮响应式按钮应该放置离手机边缘至少16dp的位置,平板电脑/pc上至少需要离24dp。 ? 悬浮响应式按钮聚焦时改变颜色,选择时上浮。 ?...一致地使用圆形图标以app间强制最重要的操作的一致性。 ? 不要给悬浮响应式按钮多余的维度效果。 ? ---- 行为(此部分见原网站) 默认情况下,悬浮响应式按钮屏幕上以动画形式展开。...跨屏幕 横跨多个横向屏幕(例如顶部标签屏幕)的悬浮响应式按钮应该短暂消失,然后如果其动作改变就重新出现(此部分动图见原网站)。...如果app的特点是添加文件类型,浮动操作按钮可以第一次触摸后转换为相关操作。 但是,如果显示的操作与按钮无关,请将操作放入溢出菜单。 ? 悬浮响应式按钮可以包含联系人列表。

5.7K90

带你领略 ConstraintLayout 1.1 的新功能

spread:均匀分配链中的所有视图 spread_inside:将第一个元素和最后一个元素放置边缘上,并均匀分布其余元素 packed:将元素包裹在链条的中心 屏障 如果您有几个视图会在运行时更改大小...布置国际化字符串或显示用户生成的无法预测大小的内容时,屏障非常有用。 ? 屏障允许您通过几个视图来创建一个约束。 屏障将始终将自己置于虚拟群组之外,并且您可以使用它来限制其他视图。...profile.visibility = GONE profile.visibility = VISIBLE 圆形约束 约束布局中,大多数约束由屏幕尺寸指定——水平和垂直。...约束布局 1.1 版本中,有一个新的类型约束 constraintCircle,它允许您指定沿着一个圆形进行约束。您不必提供水平和垂直边距,而是指定圆的角度和半径。...创建圆形约束时,请注意,角度从顶部开始并顺时针进行。

1.5K20

【黎乙丙】教你3分钟安装ps笔刷

Adobe提供了一些预设画笔 - 一般样式(圆形),干燥介质,湿媒体和特殊效果 - 但您也可以找到各种可供下载的其他画笔风格。...您可以一分钟内下载并安装画笔。(认真!)以下是如何安装Photoshop笔刷:选择要安装的文件并解压缩文件。 将文件放在其他笔刷的位置。...当选择某个画笔时,“画笔设置”面板中调整画笔的大小和形状(在打开“画笔”面板时自动打开)或在屏幕顶部的菜单。 关键笔刷术语当涉及到刷子时,有很多选择。...但是当涉及到使用Photoshop笔刷时,这里还有其他一些关键术语:硬度(用于圆形和方形笔刷):改变抗锯齿量(边缘模糊); 100%是最难的。 尺寸:画笔描边的厚度/薄度或大/小。...间距:指示笔画中标记之间的空间量,例如点在虚线笔画中显示的距离。 刷毛:创造逼真笔触的笔触,例如草。 Erodible tips:触觉绘画工具,如铅笔或蜡笔,改变他们使用得越多。

1.1K20

Anroid Wear OS 手表应用开发 - UI

圆形布局的内容,不会超过显示边界: 导航抽屉栏 为了节省宝贵的显示空间,通常手表应用是没有标题栏的,使用 ViewPager 的时候,也没有 TabLayout 的显示,但因此我们无法很好的确认当前页面...导航栏 WearableNavigationDrawerView 就是用来解决这个问题的,我们先看看它的效果: 从手表顶部向下滑,会出现一个导航栏,显示当前页面的图标和标题。...,controller.peekDrawer() 会在底部露出一小部分操作栏,如果当前页面是一个列表,这一部分会在列表滑动时隐藏,列表到顶部和底部时显示: 露出部分默认会显示操作栏第一项的图标,可以布局中添加...环形进度条 CircularProgressLayout 是一个环形的进度条,通常用它包裹一个圆形按钮: 可以用它来做防误触,用户点击按钮后,允许进度条走完之前,点击取消操作。...,他们的应用列表界面是这样的: 圆形表盘上,列表是沿着表盘左边,曲线排列滚动的。

2.5K30

浮动清楚浮动及position的用法

关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。...值 描述 left 左侧不允许浮动元素。 right 右侧不允许浮动元素。 both 左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。...scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。...overflow(水平和垂直均设置) overflow-x(设置水平方向) overflow-y(设置垂直方向) 圆形头像示例 <!...综合示例 顶部导航菜单 <!

2.1K40

一篇文章,带你了解7种数据可视化的方式!

这样的圆滑边缘真实值的基础上增加了两到三个“幽灵”百分比。让我们看看下面非圆滑的边缘。 看看有多少装饰,包括圆滑边缘,被用来表达三个简单的数据点。 好消息是图表可以变得更简单。...嵌套图表中,圆环的末端使比较大小变得困难。 如何避免 考虑使用条形图来精确显示百分比。 若非要使用一个圆形图表,避免嵌套的圆圈和圆滑边缘。 3....更高的百分比不仅增加了更宽的圆形截面,而且,半径更大! 重叠和超出背后的逻辑是什么?人们如何解读这些“数据” ?这是否意味着图表显示超过100% 和超过360度?...“香肠”是界面世界的真正窃贼,因为它们在有真实数据的地方显示了空白空间。公平地说,“香肠”采用高对比度,以便你可以看到绿色和橙色之间的边缘,但这种对比度的代价太高。...当“摩天大楼”突出显示“屋顶”时,它们就更难阅读了,因为顶部的条看起来更高。 如何避免 不要在商业图表上使用3D效果。 确保图表设计支持真实的数据,这些数据通常不像原型图那样完美呈现波浪形。 7.

1.3K30

iPhone X 适配指南 (官方翻译版)

iPhone X iPhone X包括一个大型,高分辨率,圆形边缘边缘显示器,提供了一个沉浸式,内容丰富的体验,从未像以前那样。...背景材料延伸到显示器的边缘,并且UI元件被适当地插入和定位。...同样,全屏iPhone X图稿显示时被裁剪或被柱状显示全屏显示4.7 寸iPhone上,确保重要的视觉内容保持两种显示尺寸上。 避免将交互式控件明确放置屏幕底部和角落。...请勿尝试隐藏设备的圆角,传感器外壳或通过屏幕顶部和底部放置黑色条来访问主屏幕的指示器。不要使用像括号,边框,形状或教学文字等视觉装饰,也要特别注意这些区域。 允许自动隐藏指示灯,以便轻松访问主屏幕。...手势 iPhone X上的显示屏使用屏幕边缘手势来访问主屏幕,应用程序切换器,通知中心和控制中心。 避免干扰系统范围的屏幕边缘手势。人们依靠这些手势每个应用程序中工作。

2.5K50

一篇文章,带你了解7种数据可视化的方式!

这样的圆滑边缘真实值的基础上增加了两到三个“幽灵”百分比。让我们看看下面非圆滑的边缘。 ? 看看有多少装饰,包括圆滑边缘,被用来表达三个简单的数据点。 ? 好消息是图表可以变得更简单。...嵌套图表中,圆环的末端使比较大小变得困难。 如何避免 考虑使用条形图来精确显示百分比。 若非要使用一个圆形图表,避免嵌套的圆圈和圆滑边缘。 3....更高的百分比不仅增加了更宽的圆形截面,而且,半径更大! ? 重叠和超出背后的逻辑是什么?人们如何解读这些“数据” ?这是否意味着图表显示超过100% 和超过360度? ?...“香肠”是界面世界的真正窃贼,因为它们在有真实数据的地方显示了空白空间。公平地说,“香肠”采用高对比度,以便你可以看到绿色和橙色之间的边缘,但这种对比度的代价太高。 ?...当“摩天大楼”突出显示“屋顶”时,它们就更难阅读了,因为顶部的条看起来更高。 如何避免 不要在商业图表上使用3D效果。 确保图表设计支持真实的数据,这些数据通常不像原型图那样完美呈现波浪形。 7.

1.3K40

Adobe Photoshop使用,选框工具进行选择教程

原标题:「Adobe国际认证」Adobe Photoshop使用选框工具进行选择教程 选框工具允许您选择矩形、椭圆形和宽度为 1 个像素的行和列。...椭圆选框:建立一个椭圆形选区(配合使用 Shift 键可建立圆形选区)。 单行或单列选框:将边框定义为宽度为 1 个像素的行或列。 2.选项栏中指定一个选区选项。 3.选项栏中指定羽化设置。...按住 Shift 键时拖动可将选框限制为方形或圆形(要使选区形状受到约束,请先释放鼠标按钮再释放 Shift 键)。...消除锯齿剪切、拷贝和粘贴选区以及创建复合图像时非常有用。 消除锯齿适用于套索工具、多边形套索工具、磁性套索工具、椭圆选框工具和魔棒工具。(选择工具可显示该工具的选项栏。)...选项栏中选择“消除锯齿”选项。 为选择工具定义羽化边缘 选择任意套索或选框工具。 选项栏中输入“羽化”值。此值定义羽化边缘的宽度,范围可以是羽化 0 到 250 像素。

2.5K30
领券