9

私は d3.js から始めて、各円にラベルが含まれるネットワーク グラフを作成しようとしています。

私が欲しいのは、svg テキストの改行です。

私がやろうとしているのは、テキストを複数<tspan>の s に分割し、それぞれに x="0" と変数 "y" を付けて、実際のテキスト行をシミュレートすることです。私が書いたコードは、予期しない結果をもたらします。

var text = svg.selectAll("text").data(force.nodes()).enter().append("text");

text       
 .text(function (d) {
 arr = d.name.split(" ");
 var arr = d.name.split(" ");
 if (arr != undefined) {
  for (i = 0; i < arr.length; i++) {
   text.append("tspan")
    .text(arr[i])
    .attr("class", "tspan" + i);
  }
 }
});

このコードでは、テキスト文字列を空白で分割し、分割された各文字列を tspan に追加しています。ただし、他のサークルに属するテキストも各サークルに表示されています。この問題を克服するにはどうすればよいですか？

これは、 svgテキストのみのJSFIDDLE http://jsfiddle.net/xhNXS/です

これは、 tspanに関する私の問題を示すJSFIDDLE http://jsfiddle.net/2NJ25/16/です。

4

1 に答える 1

31

tspan改行の印象を与えるには、各要素の位置 (またはオフセット) を指定する必要があります。これらは、実際には、任意に配置できる単なるテキスト コンテナーです。要素内の要素に「絶対」座標 (つまりと) を指定できるため、text要素を要素でラップすると、これははるかに簡単になります。これにより、要素を行頭に移動しやすくなります。gxytspan

要素を追加するメイン コードは次のようになります。

text.append("text")       
    .each(function (d) {
    var arr = d.name.split(" ");
    for (i = 0; i < arr.length; i++) {
        d3.select(this).append("tspan")
            .text(arr[i])
            .attr("dy", i ? "1.2em" : 0)
            .attr("x", 0)
            .attr("text-anchor", "middle")
            .attr("class", "tspan" + i);
    }
});

これは、各要素に対して関数を呼び出し、使用して.each()いたのではなく戻り値を期待しません.text()。このdy設定は行の高さを指定し、x0 に設定すると、すべての新しい行がブロックの先頭から開始されることを意味します。

ここでjsfiddleを変更し、その他のいくつかのマイナーなクリーンアップを行いました。

于 2013-10-18T11:37:55.217 に答える