D3.js vertical relationship diagram (with arrows and text description of connecting lines)

    <script src="d3.js"></script>

    <style>
        .node {
            font: 12px sans-serif;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }
    </style>

  <script>
        var width = 1100,
            height = 700;
        var cluster = d3.layout.tree()
            .size([width, height - 200]);

        var diagonal = d3.svg.diagonal()
            .projection(function (d) {
                return [d.x, d.y];
            });
        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("transform", "translate(" + 612 + "," + 50 + ")");

        // arrow 
        var marker =
            svg.append("marker")
                .attr("id", "resolved")
                .attr("markerUnits", "strokeWidth")// Set to strokeWidth The arrow will change with the thickness of the line 
                .attr("markerUnits", "userSpaceOnUse")
                .attr("viewBox", "0 -5 10 10")// The area of the coordinate system 
                .attr("refX", 10)// Arrow coordinates 
                .attr("refY", -1)
                .attr("markerWidth", 12)// Size of identity 
                .attr("markerHeight", 12)
                .attr("orient", "auto")// Draw the direction , Can be set to ：auto（ Automatically confirm the direction ） and   Angle value 
                .attr("stroke-width", 2)// Arrow width 
                .append("path")
                .attr("d", "M0,-5L10,0L0,5")// The path of the arrow 
                .attr('fill', '#000000');// The arrow color 


        var root = {
            "name": " China ",
            "number": "2000",
            "children":
            [
                {
                    "name": " Zhejiang ",
                    "number": "100",
                    "children":
                    [
                        {
                            "name": " Hangzhou ",
                            "number": "100"
                        },
                        {
                            "name": " ningbo ",
                            "number": "200"
                        }
                    ]
                },
                {
                    "name": " guangxi ",
                    "number": "500",
                    "children":
                    [
                        {
                            "name": " guilin ",
                            "number": "100"
                        },
                        {
                            "name": " nanning ",
                            "number": "200"
                        }
                    ]
                },
                {
                    "name": " heilongjiang ",
                    "number": "500",
                    "children":
                    [
                        {
                            "name": " Harbin ",
                            "number": "100"
                        }
                    ]
                },
                {
                    "name": " xinjiang ",
                    "number": "500",
                    "children":
                    [
                        {
                            "name": " urumqi ",
                            "number": "100"
                        }
                    ]
                }]
        }
        var i = 0;
        var nodes = cluster.nodes(root).reverse();
        nodes.forEach(function (d) { d.y = d.depth * 200; });

        var links = cluster.links(nodes);


 var linkEnter = svg.selectAll("path.link")
            .data(links);

        linkEnter.enter().append("path")// Insert an element before the specified element 
            .attr("class", "link")
            .attr("d", diagonal)
            .attr("stroke", "white")
            .attr("marker-end", "url(#resolved)")// According to the arrow mark id Mark arrow 
            .style("fill", "white")
            .style("fill-opacity", 1)
            //  First, add an identifier for each node connection id
            .attr("id", function (d, i) {
                return "mypath" + i;
            });

        // Add text to the line 
        linkEnter.enter().append('text')
            .attr('x', 100)
            .attr('y', 80)
            .style('fill', 'green')
            .style('font-size', '15px')
            .style('font-weight', 'bold')
            .append('textPath')
            .attr({// Reference path 
                'xlink:href': function (d, i) {
                    return "#mypath" + i;
                }
            })
            .text(function (d, i) {
                debugger
                return d.target.number
            });


        var node = svg.selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function (d) {
                return "translate(" + (d.x + -50) + "," + (d.y) + ")";
            })

        node.append("rect")
            .attr("width", 100)
            .attr("height", 40)
            .attr("x", 0)
            .attr("y", 0)
            .attr("style", "fill:#2990ca;")
            .attr("rx", 3);

        node.append("text")
            .attr("dx", function (d) {
                return 30;
            })
            .attr("dy", 25)
            .style("text-anchor", function (d) {
                return "middle";
            })
            .style("fill", "#fff")
            .text(function (d) { return d.name; });

        node.append("text")
            .attr("dx", function (d) {
                return 70;
            })
            .attr("dy", 25)
            .style("text-anchor", function (d) {
                return "middle";
            })
            .style("fill", "#fff")
            .text(function (d) { return d.number; });

    </script>

For more articles, please scan the code and follow the official account , If you have problems, you can also raise them on the official account