dndTree.js的树视图动态增加节点
来源:互联网 发布:游戏存档软件 编辑:程序博客网 时间:2024/05/16 08:11
用dndTree.js结合d3.js绘制如下图,通过点击节点动态绘制,增加相关的节点。
动态获取json数据,绘制代码:
//得到树图json的数据
function get_json(json)
{
treeJSON = d3.json(json, function(error, treeData){
$("#tree-container").empty();
root = treeData;
global_core_config.query = root.w;
viewerWidth = $(document).width();
viewerHeight = $(document).height();
function get_json(json)
{
treeJSON = d3.json(json, function(error, treeData){
$("#tree-container").empty();
root = treeData;
global_core_config.query = root.w;
viewerWidth = $(document).width();
viewerHeight = $(document).height();
tree = d3.layout.tree()
.size([viewerHeight, viewerWidth]);
.size([viewerHeight, viewerWidth]);
diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.y, d.x];
});
.projection(function (d) {
return [d.y, d.x];
});
visit(treeData, function (d) {
totalNodes++;
if (d.w != undefined)
maxLabelLength = Math.max(d.w.length, maxLabelLength);
}, function (d) {
return d.children && d.children.length > 0 ? d.children : null;
});
return d.children && d.children.length > 0 ? d.children : null;
});
//sortTree();
zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);
baseSvg = d3.select("#tree-container").append("svg")
.attr("width", viewerWidth * 2)
.attr("height", viewerHeight * 2)
.attr("class", "overlay")
.call(zoomListener);
.attr("width", viewerWidth * 2)
.attr("height", viewerHeight * 2)
.attr("class", "overlay")
.call(zoomListener);
svgGroup = baseSvg.append("g");
root = treeData;
root.x0 = viewerHeight / 2;
root.y0 = 0;
root.x0 = viewerHeight / 2;
root.y0 = 0;
update(root);
vcenterNode(root);
}
)
}
vcenterNode(root);
}
)
}
点击获取代码:
//点击节点,从后台获取数据填充
function click(d) {
if (d.a == true)
{
var p = d.depth;
if (p > 0)
{
ttid = (d._id == undefined ? d.id : d._id);
search_core(ttid, 0, 10);
var l = d.parent;
global_core_config.query = "";
for(p=d.depth;p>1;p--)
{
global_core_config.query = l.w + global_core_config.query;
l = l.parent;
function click(d) {
if (d.a == true)
{
var p = d.depth;
if (p > 0)
{
ttid = (d._id == undefined ? d.id : d._id);
search_core(ttid, 0, 10);
var l = d.parent;
global_core_config.query = "";
for(p=d.depth;p>1;p--)
{
global_core_config.query = l.w + global_core_config.query;
l = l.parent;
}
global_core_config.query = global_core_config.query +" "+d.w;
}
}
{
var jsonstr = convertToText(root);;
}
global_core_config.query = global_core_config.query +" "+d.w;
}
}
{
var jsonstr = convertToText(root);;
}
if (typeof d.children !== 'undefined' || typeof d._children !== 'undefined') {
d = toggleChildren(d);
update(d);
} else {
$.post("find_children.action", $.toJSON({ core: global_core_config.core, query: d._id, style: 0 }), function (result) {
var findflag = d.a;
obj = $.parseJSON(result);
if (obj.children.length == 0)
{
return;
}
var count = obj.children.length;
for (var i = 0; i < count; i++) {
if (obj.children[i].w != obj.w)
obj.children[i].w = obj.w + obj.children[i].w;
}
var aobj = obj.children;
aobj.sort(function (a, b) {
return a.w.localeCompare(b.w);
});
var newnodes = tree.nodes(aobj).reverse();
d.children = newnodes[0];
update(d);
d = toggleChildren(d);
update(d);
} else {
$.post("find_children.action", $.toJSON({ core: global_core_config.core, query: d._id, style: 0 }), function (result) {
var findflag = d.a;
obj = $.parseJSON(result);
if (obj.children.length == 0)
{
return;
}
var count = obj.children.length;
for (var i = 0; i < count; i++) {
if (obj.children[i].w != obj.w)
obj.children[i].w = obj.w + obj.children[i].w;
}
var aobj = obj.children;
aobj.sort(function (a, b) {
return a.w.localeCompare(b.w);
});
var newnodes = tree.nodes(aobj).reverse();
d.children = newnodes[0];
update(d);
});
}
}
}
}
转换树为json字符串,这样绘制的图可以保存为json格式的数据:
function convertToText(obj) {
var string = [];
function convertToText(obj) {
var string = [];
if (obj == undefined) {
return String(obj);
} else if (typeof (obj) == "object" && (obj.join == undefined)) {
for (prop in obj) {
if (prop == "children" || prop == "_id" || prop == "w" || prop == "a")
{
if (obj.hasOwnProperty(prop))
string.push("\"" + prop + "\": " + convertToText(obj[prop]));
}
};
return "{" + string.join(",") + "}";
return String(obj);
} else if (typeof (obj) == "object" && (obj.join == undefined)) {
for (prop in obj) {
if (prop == "children" || prop == "_id" || prop == "w" || prop == "a")
{
if (obj.hasOwnProperty(prop))
string.push("\"" + prop + "\": " + convertToText(obj[prop]));
}
};
return "{" + string.join(",") + "}";
} else if (typeof (obj) == "object" && !(obj.join == undefined)) {
for (prop in obj) {
if (prop == "id" || prop == "depth" || prop == "x" || prop == "x0" || prop == "y" || prop == "y0" || obj[prop]==0)
{
continue;
}
string.push(convertToText(obj[prop]));
}
return "[" + string.join(",") + "]";
} else if (typeof (obj) == "function") {
string.push(obj.toString())
} else {
string.push(JSON.stringify(obj))
}
for (prop in obj) {
if (prop == "id" || prop == "depth" || prop == "x" || prop == "x0" || prop == "y" || prop == "y0" || obj[prop]==0)
{
continue;
}
string.push(convertToText(obj[prop]));
}
return "[" + string.join(",") + "]";
} else if (typeof (obj) == "function") {
string.push(obj.toString())
} else {
string.push(JSON.stringify(obj))
}
return string.join(",");
}
}
代码:
2 0
- dndTree.js的树视图动态增加节点
- JS对DOM节点的操作--增加节点,删除节点
- js的动态增加控件
- 仿dtree编写的树型菜单,增加了可以动态增加节点
- extjs4 treegrid动态增加树节点
- xmemcached 动态增加节点
- hadoop动态增加节点
- Redis动态增加节点
- JS动态增加删除UL节点LI及相关内容
- js动态增加ul节点li及input
- JS(客户端)增加节点
- js增加节点
- js----增加删除节点
- js增加删除节点
- JS实现数的遍历,查询,增加节点,删除节点
- 动态增加tree组建节点
- greenplum 实验,动态增加节点
- hadoop动态增加删除节点
- DedeCMS实战-----4、制作文章内容页模板
- 关于使用HtmlEmail类发送邮件附件的一个坑
- gitlab一键安装 笔记
- WEB前端知识总结
- angular $apply方法
- dndTree.js的树视图动态增加节点
- 机器学习资料:书籍,资源,方法
- icache操作
- 1046. 划拳(15)
- 安卓Activity 生命周期
- File "setup.py", line 6, in ? from setuptools import setup, find_packages ImportError: No module
- 13. Query Builder
- 简单程序
- openssl查看证书细节