1

D3ライブラリのメソッドでその< br/ >タグを動作させるのを手伝ってください。.text()それが私が現時点で試したことです。明らかに、brタグでさえも単純なテキストを表示します。

var text_box = g
    .selectAll(".text-box")
    .data(function(d) { return points.slice(2, d); })
    .enter()
    .append("text")
    .attr({
        "class": "text-box",
        "dx": x,
        "dy": y,
        "transform": "translate(" + 15 + "," + 5 + ")"
    })
    .text(function(d, i) { return count+" changed <br/> by @"+name});

divタグを付けてメソッドを使ってみまし.html()たが、うまくいきませんでした。私が間違ったことは何ですか？

4

1 に答える 1

2

SVG<text>要素は改行を直接サポートしていません。スペックから：

各「text」要素により、テキストの単一の文字列がレンダリングされます。SVGは、自動改行やワードラップを実行しません。複数行のテキストの効果を得るには、次のいずれかの方法を使用します。

  • 作成者または作成パッケージは、改行を事前に計算し、複数の「テキスト」要素（テキストの各行に1つ）を使用する必要があります。
  • 作成者または作成パッケージは、改行を事前に計算し、属性「x」、「y」、「dx」、および「dy」に適切な値を持つ1つ以上の「tspan」子要素を持つ単一の「text」要素を使用する必要があります。新しい行を開始する文字の新しい開始位置を設定します。（このアプローチでは、複数行のテキストにわたるユーザーテキストの選択が可能です。テキストの選択とクリップボードの操作を参照してください。）
  • 'foreignObject'要素内にインラインで埋め込まれたXHTML[XHTML]などの別のXML名前空間でレンダリングされるテキストを表現します。（注：このアプローチの正確なセマンティクスは、現時点では完全には定義されていません。）

<div>SVG内でも要素が機能するとは思いません。

2番目のアプローチの例はここにあります：http：//jsfiddle.net/eVmsW/

于 2013-03-10T19:06:32.160 に答える