Question

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

Answer 1

遵循其他人的例子我

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

此示例使用上述提示：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);
            });
    }

d3边缘标签是否可行？

3 个答案: