d3 边缘标记可能吗？答案

【问题标题】：Is d3 edge labeling possible?d3 边缘标记可能吗？
【发布时间】：2013-07-26 20:01:03
【问题描述】：

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

【问题讨论】：

我假设您的意思是标记，以便文本遵循图形的路径。如果是这样，SVG 似乎在规范中有 text on a path 功能，但我从未尝试过，所以不确定它有多容易。

标签： html svg d3.js

【解决方案1】：

效仿别人的例子我

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

bl.ocks.org/2926502 是这种方法的一个示例，每个链接的每一端都有一个标签。每次刻度都会重新计算标签位置。

【解决方案3】：

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

        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);
            });
    }

【讨论】：