混淆更新根目录并向链接添加文本

var data = {
    "name": "Root",
    "img": "https://www.freelogodesign.org/Content/img/logo-samples/flooop.png",
    "children": [{
        "name": "3",
        "img": "https://www.freelogodesign.org/Content/img/logo-samples/flooop.png"
    }, {
        "name": "4",
        "img": "https://www.freelogodesign.org/Content/img/logo-samples/flooop.png"
    }],
    "parent": [{
        "name": "1",
        "img": "https://www.freelogodesign.org/Content/img/logo-samples/flooop.png"
    }, {
        "name": "2",
        "img": "https://www.freelogodesign.org/Content/img/logo-samples/flooop.png"
    }]
};
var bgColors = ['#fd90b5', '#6ca1e9', '#fa975c', '#eb7092', '#f88962', '#a094ed', '#7f8de1'];
var dr = 0;
// Left data
var data1 = {
    "name": data.name,
    "children": JSON.parse(JSON.stringify(data.children))
};

// Right data
var data2 = {
    "name": data.name,
    "children": JSON.parse(JSON.stringify(data.parent))
};

// Create d3 hierarchies
var right = d3.hierarchy(data1);
var left = d3.hierarchy(data2);

// Render both trees
drawTree(right, "right")
drawTree(left, "left")

// draw single tree
function drawTree(root, pos) {
    var refType;
    if (pos == 'left')
        refType = 'left';
    else
        refType = 'right';

    var SWITCH_CONST = 1;
    if (pos === "left") {
        SWITCH_CONST = -1;
    }

    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height")

    var g = svg.append("g").attr("transform", "translate(" + width / 2 + ",0)");

    var tree = d3.tree()
        .size([height, SWITCH_CONST * (width - 150) / 2]);

    tree(root)

    var nodes = root.descendants();
    var links = root.links();
    nodes[0].x = height / 2

    // Create links
    var link = g.selectAll(".link")
        .data(links)
        .enter()

    link.append("path")
        .attr("class", "link")
        .attr("d", function (d) {
            //first return returns a curve and the second will return straight lines in
            //return "M" + d.target.y + "," + d.target.x + "C" + (d.target.y + d.source.y) / 2.5 + "," + d.target.x + " " + (d.target.y + d.source.y) / 2 + "," + d.source.x + " " + d.source.y + "," + d.source.x;
            return "M" + d.target.y + "," + d.target.x + "A" + dr + "," + dr + " 1,0 0 " + d.source.y + "," + d.source.x;

        });


    link.append("text")
        .attr("font-family", "Arial, Helvetica, sans-serif")
        .attr("fill", "Black")
        .style("font", "normal 12px Arial")
        .attr("transform", function (d) {
            return "translate(" +
                ((d.source.y + d.target.y) / 2) + "," +
                ((d.source.x + d.target.x) / 2) + ")";
        })
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .data(nodes)
        .text(refType);

    // Create nodes
    var node = g.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", function (d) {
            return "node" + (d.children ? " node--internal" : " node--leaf");
        })
        .attr("transform", function (d) {
            return "translate(" + d.y + "," + d.x + ")";
        })

    node.append('circle')
        .attr('class', 'icon-wrap')
        .attr('x', 0)
        .attr('y', 0)
        .attr('r', 25)
        .style('fill', 'black');


    node.append('image')
        .attr('href', d => d.data.img)
        .attr('x', '-25')
        .attr('y', '-25')
        .attr('height', '50')
        .attr('width', '50');

    node.append("text")
        .attr("dy", 45)
        .style("text-anchor", "middle")
        .text(d => d.data.name);
}

.node circle {
            fill: #999;
        }

        .node text {
            font: 12px sans-serif;
        }

        .node--internal circle {
            fill: #555;
        }

        .link {
            fill: none;
            stroke: #555;
            stroke-opacity: 0.4;
            stroke-width: 1.5px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg width="800" height="550"></svg>