【visjs使用小记-3.简单网络拓扑图的折叠与展开】的更多相关文章

visjs使用小记-3.简单网络拓扑图的折叠与展开

项目需要对节点无限层级查看,大概捣鼓了下,以下demo代码可根据节点的层级顺序,通过节点双击简单实现节点的折叠与展开 <!doctype html> <html> <head> <title>Network</title> <script type="text/javascript" src="http://visjs.org/dist/vis.js"></script> <l…

visjs使用小记-1.创建一个简单的网络拓扑图

1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head> <title>Network</title> <script type="text/javascript" src="http://visjs.org/dist/vis.js"></script> <link href="http…

快速开发基于 HTML5 网络拓扑图应用

采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 该例子展示了如何构建两个节点.一条连线.以及一个 Group 的组合效果.结合 <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型,以下为构建上图界面效果…

HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web 的整合. HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS.百度地图…

百度地图、ECharts整合HT for Web网络拓扑图应用

前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来也做一个类似空气质量报告的报表+拓扑图应用,于是有了下面的Demo: 在这个Demo中,将GraphView拓扑图组件添加到百度地图组件中,覆盖在百度地图组件之上,并且在百度地图组件上和GraphView拓扑图组件上分别添加事件监听,相互同步经纬度和屏幕位置信息,从而来控制拓扑图上的组件位置固定在地…

ECharts+BaiduMap+HT for Web网络拓扑图应用

前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来也做一个类似空气质量报告的报表+拓扑图应用,于是有了下面的Demo:http://www.hightopo.com/demo/blog_baidu_20150928/ht-baidu.html 在这个Demo中,将GraphView拓扑图组件添加到百度地图组件中,覆盖在百度地图组件之上,并且在百度地…

矢量Chart图表嵌入HTML5网络拓扑图的应用

使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是也不是没有解决方案,接下来我们就来聊聊具体的解决方案. 首先,第一种解决方案是,在定义 Chart 矢量的时候在 comps 中除了定义 Chart 外,再添加几个你自定义的绘制区域来绘制你想要的坐标轴,效果及 example 如下: 该 Chart 的定义代码见附录1(代码的定义太长),代码虽然长…

快速开发基于 HTML5 网络拓扑图应用1

今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件,其相关类库都在 ht.graph 包下.GraphView 具有基本图形的呈现和编辑功能,拓扑节点连线及自动布局功能,电力和电信等行业预定义对象,具有动画渲染等特效,因此其应用面很广泛,可作为监控领域的绘图工具和人机界面,可作为一般性的图形化编辑工具,可扩展成工作流和组织图等企业应…

基于 HTML5 Canvas 绘制的电信网络拓扑图

电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式描述网路单元的邻接关系,即以交换中心(或节点)和传输链路所组成的拓扑结构.常见的网络拓扑结构有星型结构.总线结构.环形结构.树形结构.网状结构.混合型拓扑以及蜂窝拓扑结构等,本文的例子主要描绘的是总线型拓扑,在显示上相对其他的结构类型来说更清晰明了,绘制起来也非常容易. 虽然题目起的名字是电信网络拓…

快速创建 HTML5 Canvas 电信网络拓扑图

前言 属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框,对传入的数据进行选择的功能,感觉整体实践起来还是比较简单方便的,所以在这边跟大家分享一下. 效果图 http://www.hightopo.com/demo/propertyEditor/index.html 代码实现 拓扑图 从上面的效果图中我们可以看到,整个页面分为 3 个部分,左边的 g…