html - d3 边缘标记可能吗？

Question

是否可以使用d3在图中添加边标签？我查看了示例和一些文档，我可以看到节点标记在哪里是可能的，但是边缘标记在任何地方都没有明确提到（我可以找到）。

Answer 1

跟随其他人的例子我

• path在每个边缘添加一个，
• 添加text到边缘
• 将该文本绑定到textpath引用沿边缘的路径的a

这个例子是使用上面的想法：http ://bl.ocks.org/jhb/5955887

Answer 2

简短的回答是“是”，但没有明确的支持。您必须自己确定标签的位置。这样做的一种方法是将标签附加到起始节点并将其平移到目标节点距离的一半，加上一些偏移量以防止它与线重叠。对于更精细的边缘（例如曲线），这将更加困难。

Answer 3

我尝试了路径选项上的文本，但它非常复杂并且没有产生我想要的外观。不幸的是，我没有将它检入本地 git 存储库。这来自我的 Eclipse 历史（感谢 Eclipse 开发人员）。您必须将此代码片段更改为您自己的数据结构，但我希望它会有所帮助。特别要注意将id值添加到lines选择中，然后通过使用xlink:href属性在百分比选择中重用它。另外，我在 中添加了一个tspan将textpath文本向下移动几个像素，使其出现在路径上而不是路径上。

        function drawLines(links) {
        var diagonal = d3.svg.diagonal();
        var format = d3.format(".1%");
        var linkKey = function(l) {return l.target.key; };
        var lines = linesGroup.selectAll("path").data(links, linkKey);
        lines.enter()
            .append("path")
            .on("mouseover", select)
            .on("mouseout", unselect)
            .attr("d", diagonal)
            .attr("id", function (l) { return "interaction-path-target-" + l.target.key; })
            .style("stroke-width", 0.000001);
        lines.exit()
            .transition().duration(500)
            .style("stroke-width", 0.000001)
            .remove();

        lines.transition()
            .delay( function(d, i) { return i * 100; })
            .duration(500)
            .style("stroke-width", function(d) { return d.weight == 0 ? 0.000001 : d.weight / 1000; })
            .attr("d", diagonal);

        var percentages = linesGroup.selectAll("text").data(links, linkKey);
        percentages.enter()
            .append("text")
            .attr("opacity", 1)
            .append("svg:textPath")
            .attr("startOffset", "70%")
            .attr("xlink:href", 
                    function(l) { 
                        return "#interaction-path-target-" + l.target.key; 
                    })
            .append("svg:tspan")
            .attr("dy", 3)
            .attr("class", "percentageText")
        percentages.exit()
            .transition().duration(500)
            .attr("opacity", 0)
            .remove();
        percentages
            .transition()
            .delay( function(d, i) { return i * 100; })
            .duration(500)
            .attr("opacity", 1);

        percentages.select(".percentageText").text(function(d) {
                var newvalue = d.weight ?
                    d.incomming ? percentageIn(d.weight) : percentageOut(d.weight) : 0;
                return format(newvalue);
            });
    }