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

我正在尝试使用d3js构建一棵树。我有一棵两边的树,中间有根。我向着根的右边显示父母,向着根的左边显示孩子。这是我的代码。

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>

在这里,我有1个问题,需要1个增强方面的帮助。

  1. The issue is that I'm unable to get the logo seen in the root node.
  2. I'm printing left and right text that shows the left and right text, but I'm doing it in a loop. I want to know how I can have a big rectangle covering both the paths in right or left and have left/right text printed only once in the center?

理想情况是这样。

enter image description here

谢谢

评论