Javascript 增加D3可折叠树形图中每个节点之间的间距/填充，以避免节点和文本重叠

这里我使用D3构建了一个可折叠的树形图，但由于数据量大，节点和它们对应的文本重叠，即在垂直视图上，我尝试了一些东西，但没有得到想要的结果。如果我能从这里得到一些帮助，这样我就可以避免图表中的文本和节点重叠，这将是非常棒的

这是我面临的实际问题的截图。

在其他协助中，我将包括我的代码笔链接。

这是密码

D3.js

函数demoCallFirst（ele，isRedraw）{
/*转换部分开始*/
log（“perMapData--”，isRedraw）；
/*转换部分结束*/
/*开始*/
var obj=JSON.parse（ele）；
var treeData=[obj]；
//*************生成树形图*****************
var保证金={
前20名，
右:120,，
底数：20，
左：260
},
宽度=16000-边距。右侧-边距。左侧，
高度=500-margin.top-margin.bottom；
var i=0，
持续时间=750，
根；
var tree=d3.layout.tree（）
.分离（功能（a、b）{
返回（（a.parent==root）和&（b.parent==root））？3:1；
})
.尺寸（[高度、宽度-160]）；
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y，d.x]；
});
//定义工具提示的div
var div=d3。选择（“.tree”）。追加（“div”）
.attr（“类”、“工具提示”）
.attr（'id'，'container'））
.样式（“不透明度”，0）；
var svg=d3.选择（“.tree”）.追加（“svg”）
.style（“填充顶部”、“4em”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
//.attr（“保留Aspectratio”、“无”）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（'id'，'sky'）
.attr（“变换”、“平移”（+margin.left+），”+
保证金（大写+）；
根=树数据[0]；
root.x0=高度/2；
root.y0=0；
//在第二层之后崩溃
如果（！isRedraw）
根。子。forEach（塌陷）；
更新（根）；
//折叠节点及其所有子节点
功能崩溃（d）{
log（'check child-->'，d.children）；
如果（d.儿童）{
d、 _children=d.children
d、 _儿童。forEach（崩溃）
d、 children=null
}
}
d3.选择（self.frameElement）.style（“高度”，“500px”）；
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
nodes.forEach（函数（d）{
d、 y=d.深度*300
});
//更新节点…
var node=svg.selectAll（“g.node”）
.数据（节点、功能（d）{
返回d.id | |（d.id=++i）；
});
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate（“+source.y0+”，”+
source.x0+
")";
})
。开启（“点击”，点击）；
nodeEnter.append（“圆”）
.attr（“r”，1e-6）
.样式（“填充”，功能（d）{
返回d.nodalColor；
});
nodeEnter.append（“文本”）
.attr（“x”，函数（d）{
返回d.children | | d.| U儿童？-13:13；
})
.attr（“dy”，“.1em”）
.attr（“文本锚定”，函数（d）{
返回d.children | | d.| u children？“结束”：
“开始”；
})
.文本（功能（d）{
返回d.name；
})
.样式（“填充”，功能（d）{
返回d.type；
})
.呼叫（wrap，400）
.样式（“填充”，功能（d）{
返回d.color；
})
/*if（obj.children.name=‘能力’| |‘产品’| |‘过程’）{
.style（“fill”，函数（d）{return d._children？“royalblue”：“#000000”}）
}*/
/*显示父级的子级数的逻辑*/
/*nodeEnter.append（'text'）
.attr（“dy”，“.35em”）
.attr（“x”，函数（d）{
返回d.children | | d.| U children？4:-4；
})
.attr（“文本锚定”，函数（d）{
返回d.children | | d.| u children？“结束”：
“开始”；
})
.文本（功能（d）{
var children=d.children | | d.| u children；
返回children？childrence.length:空；
})*/
/*显示父端子端数量的逻辑*/
.on（“鼠标悬停”，功能（d）{
过渡部（）
.持续时间（200）
.样式（“不透明度”，0.8）；
div.html（d.name+“
”）
.style（“左”，“d3.event.pageX）+“px”）
.样式（“顶部”（d3.event.pageY-38）+
“px”）
})
.开启（“鼠标出”，功能（d）{
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
});
//将节点转换到其新位置。
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
});
节点更新。选择（“圆圈”）
.attr（“r”，8）
.样式（“填充”，功能（d）{
返回d.nodalColor；
});
nodeUpdate.select（“文本”）
猪圈
function demoCallFirst(ele, isRedraw) {
    /*Conversion Part Starts*/
    console.log("perMapData--", isRedraw);
    /*Conversion Part Ends*/
    /*start*/
    var obj = JSON.parse(ele);
    var treeData = [obj];


    // ************** Generate the tree diagram  *****************
    var margin = {
            top: 20,
            right: 120,
            bottom: 20,
            left: 260
        },
        width = 16000 - margin.right - margin.left,
        height = 500 - margin.top - margin.bottom;

    var i = 0,
        duration = 750,
        root;

    var tree = d3.layout.tree()
        .separation(function(a, b) {
            return ((a.parent == root) && (b.parent == root)) ? 3 : 1;
        })
        .size([height, width - 160]);

    var diagonal = d3.svg.diagonal()
        .projection(function(d) {
            return [d.y, d.x];
        });

    // Define the div for the tooltip
    var div = d3.select(".tree").append("div")
        .attr("class", "tooltip")
        .attr('id', 'container')
        .style("opacity", 0);

    var svg = d3.select(".tree").append("svg")
        .style("padding-top", "4em")
        .attr("width", width + margin.right + margin.left)
        //.attr("preserveAspectRatio","none")
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr('id', 'sky')
        .attr("transform", "translate(" + margin.left + "," +
            margin.top + ")");

    root = treeData[0];
    root.x0 = height / 2;
    root.y0 = 0;

    // Collapse after the second level
    if (!isRedraw)
        root.children.forEach(collapse);
    update(root);

    // Collapse the node and all it's children
    function collapse(d) {
        console.log('check child------>', d.children);
        if (d.children) {
            d._children = d.children
            d._children.forEach(collapse)
            d.children = null
        }
    }

    d3.select(self.frameElement).style("height", "500px");

    function update(source) {

        // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
            links = tree.links(nodes);

        // Normalize for fixed-depth.
        nodes.forEach(function(d) {
            d.y = d.depth * 300
        });

        // Update the nodes…
        var node = svg.selectAll("g.node")
            .data(nodes, function(d) {
                return d.id || (d.id = ++i);
            });

        // Enter any new nodes at the parent's previous position.
        var nodeEnter = node.enter().append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + source.y0 + "," +
                    source.x0 +
                    ")";
            })
            .on("click", click);

        nodeEnter.append("circle")
            .attr("r", 1e-6)
            .style("fill", function(d) {
                return d.nodalColor;
            });

        nodeEnter.append("text")
            .attr("x", function(d) {
                return d.children || d._children ? -13 : 13;
            })
            .attr("dy", ".1em")
            .attr("text-anchor", function(d) {
                return d.children || d._children ? "end" :
                    "start";
            })
            .text(function(d) {
                return d.name;
            })

            .style("fill", function(d) {
                return d.type;
            })
            .call(wrap, 400)
            .style("fill", function(d) {
                return d.color;
            })

            /*if(obj.children.name = 'Capabilities' || 'Offerings' || 'Processes'){
            .style("fill", function(d) { return d._children ? "royalblue" : "#000000";})
            }*/


            /*Logic for displaying no.of children for a parent*/
            /*nodeEnter.append('text')
                .attr("dy", ".35em")
                .attr("x", function(d) {
                    return d.children || d._children ? 4 : -4;
                })
                .attr("text-anchor", function(d) {
                    return d.children || d._children ? "end" :
                        "start";
                })
                .text(function(d) {
                    var children = d.children || d._children;
                    return children ? children.length : null;
                })*/
            /*Logic for displaying no.of children for a parent ends*/
            .on("mouseover", function(d) {
                div.transition()
                    .duration(200)
                    .style("opacity", 0.8);
                div.html(d.name + "</br>")
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 38) +
                        "px")
            })
            .on("mouseout", function(d) {
                div.transition()
                    .duration(500)
                    .style("opacity", 0);
            });

        // Transition nodes to their new position.
        var nodeUpdate = node.transition()
            .duration(duration)
            .attr("transform", function(d) {
                return "translate(" + d.y + "," + d.x + ")";
            });

        nodeUpdate.select("circle")
            .attr("r", 8)
            .style("fill", function(d) {
                return d.nodalColor;
            });

        nodeUpdate.select("text")
            .style("fill-opacity", 1);

        // Transition exiting nodes to the parent's new position.
        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function(d) {
                return "translate(" + source.y + "," +
                    source.x +
                    ")";
            })
            .remove();

        nodeExit.select("circle")
            .attr("r", 1e-6);

        nodeExit.select("text")
            .style("fill-opacity", 1e-6);

        // Update the links…
        var link = svg.selectAll("path.link")
            .data(links, function(d) {
                return d.target.id;
            });

        // Enter any new links at the parent's previous position.
        link.enter().insert("path", "g")
            .attr("class", "link")
            .attr("d", function(d) {
                var o = {
                    x: source.x0,
                    y: source.y0
                };
                return diagonal({
                    source: o,
                    target: o
                });
            });

        // Transition links to their new position.
        link.transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition exiting nodes to the parent's new position.
        link.exit().transition()
            .duration(duration)
            .attr("d", function(d) {
                var o = {
                    x: source.x,
                    y: source.y
                };
                return diagonal({
                    source: o,
                    target: o
                });
            })
            .remove();

        // Stash the old positions for transition.
        nodes.forEach(function(d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }

    // Toggle children on click.
    function click(d) {
        //console.log('dataa---',d.parentid);
        //var typeId = d.data.parentid;
        console.log('check data--->', d.children);
        console.log('check data--->', d._children);
        if (d.children) {
            d._children = d.children;
            d.children = null;

        } else {
            d.children = d._children;
            d._children = null;

            if (d.childId != null && d.childId != 'undefined' && d.children == null) {
                updateTree(d.childId);
            }

        }
        update(d);

        /*console.log('asapData---',d.aspid);
        passParentId(d.aspid);*/
    }
}