血缘图样式

准备一个Dom

<div id="D3svg"></div>

Github找示例

代码准备 动态血缘关系图可以根据这个代码，自己修改自己的数据，格式，样式等，改造成自己需要的这种分布图

getData

var getData = function () {
    $.ajax({
        type: "get",
        url: ctx + "business/cattleresume/pedigreeData",
        data: {
            type: "upAndDow",
            unid: "[[${unid}]]"
        },
        success: function (res) {
           // res.data 进行处理
                rootName = ""//跟目录名称
            drawing();
        },
        error: function () {
           // 报错处理
        }
    });
};

对应样式修改

• nodeEnter.append("svg:rect") 方框
• nodeEnter.append("text") 方框内容
• nodeUpdate.select('circle') 方框圆圈
• nodeEnter.append("svg:text") 代表是否展开的+-号

点击+-号动态数据

主要是修改click（）

function click(d) {
    if (clickAble) {
        let that = this
        isExpand = !isExpand;
        if (d.name == "origin") {
            return;
        }
        clickAble = false;
        if (d.children) {
            clickAble = true;
            d._children = d.children;
            d.children = null;
            d3.select(this).text('+')
            update(d, originalData, g);
        } else {
        console.log(d)//节点属性调试
            $.ajax({
                type: "get",
                url: url,
                data: {
                   //参数
                },
                success: function (res) {
                    if (res.code === 500 || res.data === null
                        || res.data === undefined || res.data.length === 0) {
                        //后端报错提示处理
                        clickAble = true;
                        d._children = d.children;
                        d.children = null;
                        update(d, originalData, g);
                    } else if (res.code === 0) {//请求成功
                        if (d.direction === "upward") {//往上
                            let listUp = []
                            d.children = listUp;
                        } else if (d.direction === "downward") {//往下
                            let listDown = []
                 
                            d.children = listDown;
                        }
                        // 若静态  d.children = d._children 自己尝试一下
                        clickAble = true;
                        d.children.forEach(collapse);
                        d._children = null;
                        // expand all if it's the first node
                        if (d.name == "origin") {
                            d.children.forEach(expand);
                        }
                        d3.select(that).text('-') //this
                        update(d, originalData, g);
                        let y =
                            d.direction == "upward" ? nodes[0].y - d.y : nodes[0].y - d.y;
                        let x =
                            d.direction == "upward" ? nodes[0].x - d.x : nodes[0].x - d.x;
                        treeG
                            .transition()
                            .duration(duration)
                            .attr("transform", "translate(" + x + "," + y + ")");
                    }
                },
                error: function () {
                   //报错处理
                }
            })
        }
    }
}