How to add link name on the line d3.js?
<p>I can able to display the nodes and able to connect the nodes by the link dynamically. Here i am displaying the image instead of nodes(circle). but i am trying to display the link name on the top of the line. I have gone through some of the links but am not able to display the name.</p>

<p>I can see the text element in the browser inspect element. But the text is not visible. Here is my code.</p>

<pre><code>var nodes = [{"x":100,"y":240,"image":"/fpui/img/lan.png"},{"x":230,"y":240,"image":"/fpui/img/mpvpn_boxsmall.png"},{"x":360,"y":120,"image":"/fpui/img/router.png"},{"x":360,"y":240,"image":"/fpui/img/router.png"},{"x":360,"y":360,"image":"/fpui/img/router.png"},{"x":490,"y":120,"image":"/fpui/img/isp.png"},{"x":490,"y":240,"image":"/fpui/img/isp.png"},{"x":490,"y":360,"image":"/fpui/img/isp.png"},{"x":620,"y":240,"image":"/fpui/img/internet.png"},{"x":750,"y":120,"image":"/fpui/img/server.png"},{"x":750,"y":240,"image":"/fpui/img/server.png"},{"x":750,"y":360,"image":"/fpui/img/server.png"}] jquery-2.0.2.min.js line 4 &gt; eval:405:1
var links = [{"source":0,"target":1,"class":"link-green","name":"LAN"},{"source":1,"target":2,"class":"link-green","name":"WAN1"},{"source":1,"target":3,"class":"link-green","name":"WAN2"},{"source":1,"target":4,"class":"link-green","name":"WAN3"},{"source":2,"target":5,"name":"","class":"link-green"},{"source":3,"target":6,"name":"","class":"link-green"},{"source":4,"target":7,"name":"","class":"link-green"},{"source":5,"target":8,"class":"link-green","name":""},{"source":6,"target":8,"class":"link-green","name":""},{"source":7,"target":8,"class":"link-green","name":""},{"source":8,"target":9,"class":"link-green","name":""},{"source":8,"target":10,"class":"link-green","name":""},{"source":8,"target":11,"class":"link-green","name":""}]

var svg = d3.select('#routeTestDisplay').append('svg')
        .attr('width', width)
        .attr('height', height);

    var force = d3.layout.force()
        .size([width, height])
        .nodes(nodes)
        .links(linkArr)
        .start();
    force.linkDistance(200);
    var link = svg.selectAll('.link')
        .data(linkArr)
        .enter().append('line')
        /*.attr('class', 'link')
         .style("stroke", function(d,i){
         return color(i)
         })*/
        .style("stroke-width", 3);

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



    var node = svg.selectAll('.node')
        .data(nodes)
        .enter().append('svg:image')
        .attr("width", 50)
        .attr("height", 50)

    node.attr('r', 30)
        .attr("xlink:href", function(d) {
            return d.image;
        })
        .attr('x', function(d) {
            return d.x - 15;
        })
        .attr('y', function(d) {
            return d.y - 30;
        });
    link.attr('class', function(d) {
        return d.class;
    });
    link.attr('x1', function(d) {
        return d.source.x;
    })
        .attr('y1', function(d) {
            return d.source.y;
        })
        .attr('x2', function(d) {
            return d.target.x;
        })
        .attr('y2', function(d) {
            return d.target.y;
        });
</code></pre>

<p>Could you please anyone help how to achieve this?</p>