Graph d3.js：将链接标签与链接本身对齐

社区好！这就是我想要实现的。。。 这是到目前为止我的工作代码（与图片的左半部分相关）：

因此，我已经成功地将文本附加到链接上，但是现在我如何定位链接上方的链接方向，如我的附加图片所示

---

非常感谢您的帮助，我应该会有所帮助。因此，我必须添加一个path元素并将其附加到链接中，然后添加一个text元素并将其附加到路径中？您可以以类似的方式将文本沿着已有的行放置。因此，我将为我的链接提供一个id属性（“path1”）并创建var newtext=svg.append（“text”）……append（“textpath”）.attr（“xlink:href”，“#path1”）.text（“此处的一些文本”）将文本添加到链接（？）。然而，现在所有的新文本都卡在左上角。我该如何更新它们在tick（）函数中的位置？啊，我明白你的意思了——是的，你需要定义与这些行对应的单独路径并使用它们。

    var diagramElement = this.getElement(); 
    var links = eval(this.getState().string);
    // string = e.g. "[{source: \"Germany\", target: \"Europe\", property: \"is type\", type: \"connection\"}]"
    var width = 800, height = 300;

    var svg = d3.select(diagramElement).append("svg")
    .attr("width", width)
    .attr("height", height);

    var force = d3.layout.force()
    .size([width, height])
    .linkDistance(100)
    .charge(-400)
    .on("tick", tick);

    var link;
    var circle;
    var text;
    var nodes = {};
    var linktext;

   svg.append("defs")
    .selectAll("marker").data(["connection", "new"]).enter()
    .append("marker")
    .attr("id", function(d) { return d; })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", 0)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

    this.onStateChange = function() {

        svg.selectAll("g").remove();
        nodes = {};
        links = [];

        links = eval(this.getState().string);
        links.forEach(function(link) {
            link.source = nodes[link.source] || (nodes[link.source] = {name : link.source});
            link.target = nodes[link.target] || (nodes[link.target] = {name : link.target});
        });

        force
            .nodes(d3.values(nodes))
            .links(links)
            .on("tick", tick)
            .start();

        link = svg.append("g").selectAll("line.link")
            .data(force.links())
            .enter()
            .append("svg:line")
            .attr("class", function(d) {return "link " + d.type;})
            .attr("marker-end", function(d) {return "url(#" + d.type + ")";});


        circle = svg.append("g").selectAll("circle")
            .data(force.nodes())
            .enter()
            .append("circle")
            .attr("r", 8)
            .call(force.drag);

        text = svg.append("g").selectAll("text")
            .data(force.nodes())
            .enter()
            .append("text")
            .style("font-size","15px")
            .attr("x", 10)
            .attr("y", ".42em")
            .text(function(d) {return d.name;});

            // this is where the linktext is aligned relatively to the links
            // must change something here 
        linktext = svg.append("g").selectAll("text")
            .data(force.links())
            .enter()
            .append("text")
            .style("font-size","15px")
            .attr("dx", 1)
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .text(function(d) {return d.type;});


    };

    function tick() {

        circle.attr("cx", function(d) { return d.x = Math.max(12, Math.min(798 - 12, d.x)); })
              .attr("cy", function(d) { return d.y = Math.max(12, Math.min(279 - 12, d.y)); });

        text.attr("transform", transform);

        // linktext position update     
        linktext.attr("transform", function(d) {return "translate(" + (d.source.x + d.target.x) / 2 + "," + (d.source.y + d.target.y) / 2 + ")";});   

        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; });  
    }
    function transform(d) {
        return "translate(" + d.x + "," + d.y + ")";
    }