11

D3.js を使用して SVG:Text に複数行のテキストを表示する必要があります。

サンプル データは次のようになり、強制指向レイアウトの個々のノードとしてではなく、すべての作成者の単一ノードの下に「すべて」の「タイトル」を表示したいと考えています。

サンプルデータ

{
    {"author":"Author1", "group":"fiction", "books" : [
        {"title":"Book Title1", "rating":3},
        {"title":"Book Title2", "rating":4}
    ]},
    {"author":"Author2", "group":"non-fiction", "books" : [
        {"title":"Book Title3", "rating":3},
    ]}
}

SVG:text は 1 つのテキスト エントリのみを取得し、1 行で表示されるため、テキストを追加して「dy」を調整しましたか? または退避的にノード情報を収集して置き換えますか?

ヒントをありがとう。

4

1 に答える 1

11

次のオプションがあります。

  • text前述のように、適切な間隔で複数の要素を追加できます。
  • 同じ効果を得るために、tspan要素内で複数の要素を使用することもできます。text繰り返しますが、間隔を自分で設定する必要があります。
  • を使用して、改行や間隔などを処理foreignObjectする適切な HTML 要素 (a など) を埋め込むことができます。divその例については、eg hereを参照してください。

特別な理由がない限り、HTML 埋め込みオプションを使用します。これにより、実際のテキストの書式設定が他のオプションよりもはるかに簡単になります。

于 2013-11-05T15:00:10.257 に答える