html左侧树形图,Qunee for HTML5 - 中文 : 树形布局

树图是一种常见的拓扑图结构，通常用来表现层次结构，组织图，从属关系等，树形结构通常通过父子关系形成，也可以通过拓扑连接关系形成

树形布局按传统的分支树分布，可设置层次间排列方向，同层节点之间的排列方式等，组合实现各种树形布局效果

布局参数

主要提供两个参数，分别控制层次之间与同层间的布局效果，可以设置给布局器对象或者节点属性，前者全局生效，后者对单个分支起作用：

比如设置全局布局方向为从下往上，可以使用下面的代码：

layouter.parentChildrenDirection = Q.Consts.DIRECTION_TOP;

#parentChildrenDirection- 层次间布局方向

支持上下左右中等方向：Q.Consts.DIRECTION_RIGHT - 向右布局

Q.Consts.DIRECTION_LEFT - 向左布局

Q.Consts.DIRECTION_CENTER - 水平居中布局

Q.Consts.DIRECTION_BOTTOM - 向下布局

Q.Consts.DIRECTION_TOP - 向上布局

Q.Consts.DIRECTION_MIDDLE - 垂直居中布局

#layoutType- 相邻节点的布局类型

提供平均分布和两侧分布两种布局类型：Q.Consts.LAYOUT_TYPE_EVEN - 平均分布，根据层次间方向自动确定孩子布局方向

Q.Consts.LAYOUT_TYPE_EVEN_HORIZONTAL - 水平平均分布

Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL - 垂直平均分布

Q.Consts.LAYOUT_TYPE_TWO_SIDE - 两侧分布

示例

var graph = new Q.Graph("canvas");

function createNode(name, from){

var node = graph.createNode(name);

if(from){

graph.createEdge(from, node);

}

return node;

}

var root = createNode("R");

root.parentChildrenDirection = Q.Consts.DIRECTION_BOTTOM;

var i = 0;

while(i++ < 3){

var node = createNode("" + i, root);

node.parentChildrenDirection = Q.Consts.DIRECTION_RIGHT;

node.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL;

var j = 0;

while(j++ < 3){

createNode("" + i + "-" + j, node);

}

var layouter = new Q.TreeLayouter(graph);

layouter.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_HORIZONTAL;

layouter.doLayout({callback: function(){

graph.zoomToOverview();

}});

运行效果

html左侧树形图,Qunee for HTML5 - 中文 : 树形布局相关推荐

qunee for html5 api,Qunee for HTML5 - 中文 : 常见问题
升级到v1.4后,文字对齐出现问题 v1.4以后的版本支持文本作为节点主体,此时,文本的挂载点位置直接通过Node#anchorPosition属性进行设置,而无需通过setStyle text.se ...
html数值转换,Qunee for HTML5 - 中文 : 数据转换
前端拿到数据后,首先需要转换成Javascript所支持的数据格式,以便数据属性的读取,比如JSON格式的文本数据,可以通过JSON#parse(...)进行解析,对于XML格式的文本可以通过DOMP ...
在线画ui生成html5,Qunee for HTML5 - 中文 : 添加UI组件
外观上看,每个图元由一个主体和多个孩子组件构成,默认节点呈现为一个图标和文字,这里的图标就是节点的主体,对于连线主体则为一条路径. 挂载孩子组件除了默认的图形元素外,使用#addUI(...)方法, ...
Qunee for HTML5 V2.5新版本发布
为什么80%的码农都做不了架构师?>>> Qunee for HTMl5 V2.5 beta2版本正式发布,此次版本内核改动较大,采用了新的2D渲染引擎,增加了延迟绘制功能,大 ...
qunee for html5 api,Qunee for HTML5
轻松开发 Qunee for HTML5使用JavaScript语言进行开发,引入qunee-min.js文件,编写简单的代码,就可以开发出来网络拓扑图 Hello Qunee for HTML5 v ...
html5新增graph,Qunee for HTML5
轻松开发 Qunee for HTML5使用JavaScript语言进行开发,引入qunee-min.js文件,编写简单的代码,就可以开发出来网络拓扑图 Hello Qunee for HTML5 v ...
HTML5视频教程，HTML5项目实战，HTML5中文指南，HTML5使用手册
HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册. 超过2G 的 HTML5 视频教程免费分享,免费下载! 尚硅谷前端HTML5视频_HTML & CSS 核心基 ...
css html5 中文,盘点5个典型的CSS3文字特效
近两年,HTML5和CSS3似乎正在掀起一场互联网的革命,各种人才纷纷涌向了这波浪潮,各种HTML5创新应用也如雨后春笋般冒了出来.的确,这应该是未来WEB的趋势了.这两天也在学习HTML5和CSS3 ...
Qunee for HTML5与ECharts对比
为什么80%的码农都做不了架构师?>>> 概述 ECharts是百度公司支持的开源产品,定位于Chart, Qunee for HTML5 是上海酷利软件的商业软件,定位于拓扑 ...
html中文手文档,HTML5 中文参考手册(打印版)
HTML5 中文参考手册整理成方便打印出来参阅的pdf文档. HTML4与HTML5标签及描述简表标签描述 4 5 定义注释. 4 5 定义文档类型. 4 5 定义超链接. 4 5 定义缩写. 4 ...

html左侧树形图,Qunee for HTML5 - 中文 : 树形布局

html左侧树形图,Qunee for HTML5 - 中文 : 树形布局相关推荐

最新文章

热门文章