dndTree.js的树视图动态增加节点

最新推荐文章于 2024-08-15 14:23:35 发布

newasoft

最新推荐文章于 2024-08-15 14:23:35 发布

阅读量3.5k

点赞数 2

分类专栏： D3.js的应用文章标签： d3.js dndTree.js

本文链接：https://blog.csdn.net/zhangliuxue/article/details/53415793

版权

本文介绍了如何在基于dndTree.js的树视图中实现动态增加节点的功能。通过示例和代码解析，详细阐述了利用d3.js库进行操作的步骤和技巧。

摘要由CSDN通过智能技术生成

用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();

tree = d3.layout.tree()
.size([viewerHeight, viewerWidth]);

    diagonal = d3.svg.diagonal()
       .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;
    });

//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);

svgGroup = baseSvg.append("g");

    root = treeData;
    root.x0 = viewerHeight / 2;
    root.y0 = 0;

update(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;

            }
            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);

});
}
}

转换树为json字符串，这样绘制的图可以保存为json格式的数据：
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(",") + "}";

    } 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(",") + "]"