3

テキスト要素を単純なノードに追加する方法を知っています（テキストを追加します）。問題は、複数のノードを囲むパスにテキストを追加したい場合です。http://jsfiddle.net/FEM3e/5/で例を作成しました。左上隅のノードは無視してください。したがって、2 つのノード グループがあります。そして、グループごとにテキストを追加したいと思います。目的の出力のプリントスクリーンhttp://dopisna.becin.si/screenshot.png。

パスを設定しました

force.on("tick", function () {
        node.attr("transform", function (d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
        vis.selectAll("path")
            .data(groups)
            .attr("d", singlePath)
            .enter().insert("path", "g")
            .style("fill", groupFill)
            .style("stroke", groupFill)
            .style("stroke-width", 57)
            .style("stroke-linejoin", "round")
            .style("opacity", .7);
    });

テキストを追加しようとしましたが、成功しませんでした。私はいくつかのヒントを求めています。

4

1 に答える 1

2

じゃあ。問題は、textPath の代わりにテキストを使用していることです。私はあなたのフィドルを変更しましたが、パスにいくつかのテキストが追加されました。

私が行った唯一の実際の変更は、次のスニペットの追加です。

        vis.selectAll("text")
            .data(groups)
            .enter()
        .append("text")
            .attr("x", 8)
            .attr("dy", 28)
           .append("textPath")
        .attr("xlink:href", function (d,i) { return "#path_" + i; })
        .text(function (d,i) { return "path_" + i; });

通常の選択とデータ バインディングを行っていることがわかります。次に、テキストに必要な属性を追加し (Mikes Bl.ock から借用したものは必ず変更します)、テキスト パスを追加して、それを xlink:href 属性のパス要素にリンクします。明らかに、いくつかのテキストを作成します。textPath の優れた点の 1 つは、曲線パスを追加できることです。

グループを textPath のデータとして使用するのは少しやり過ぎだと思うので、より適切なデータ選択を選択してこれにバインドすることをお勧めします。

于 2013-09-23T11:21:15.747 に答える