html - d3 エッジのラベル付けは可能ですか?

Question

d3を使用してグラフにエッジ ラベルを付けることは可能ですか? 例といくつかのドキュメントを調べたところ、ノードのラベル付けが可能な場所はわかりますが、エッジのラベル付けはどこにも明示的に言及されていません (私が見つけることができます)。

Answer 1

他の人々の例に従う私

• pathすべてのエッジに沿ってa を追加し、
• textエッジに追加
• textpathそのテキストを、エッジに沿ったパスを参照している にバインドします

この例では、上記のアイデアを使用しています: http://bl.ocks.org/jhb/5955887

Answer 2

パス オプションのテキストを試しましたが、複雑で、希望どおりの外観になりませんでした。残念ながら、ローカルの git リポジトリにチェックインしませんでした。これは私の Eclipse の歴史から来ています (Eclipse 開発者に感謝します)。このコード スニペットを独自のデータ構造に変更する必要がありますが、少しでもお役に立てば幸いです。id特に、選択に値を追加し、属性linesを使用してパーセンテージの選択でそれを再利用していることに注意してください。xlink:hrefまた、 に a を追加して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);
            });
    }