2

私はしばらくの間テキストの折り返しについて研究してきましたが、それらの多くはcssを使用してテキストを折り返すことを含みますか？

D3を使用して次のようなテキストを折り返す方法はありますか？

  p.append("text")
   .attr("transform", "translate(-20, -30)")
   .text("Relevance")
   .style("font", "bold 12px Arial");
4

3 に答える 3

1

ここpではまだ xhtml 要素ではないと思います。それがいくつかの svg 要素であるg場合はforeignObject、それに追加してから、次のコードのように div などの xhtml 要素を追加できます。

p = svg.append('g');
p.append("foreignObject")
 .attr("x", 5)
 .attr("y", 5) 
 .attr("width", 100) // replace with width you want 
 .attr("height", 100)// replace with height you want
 .append("xhtml:div")// replace with html element you want
 .append("p")
 .text("Relevance");
于 2013-05-16T07:17:07.210 に答える
1

他の回答では、を使用することをお勧めしsvg:foreignObjectます。悲しいことに、IE のどのバージョンも をサポートしてforeignObjectいません。他のブラウザー間でのサポートは、一部のサポートされていないトランジションと矛盾しています。したがって、遷移が必要なく、IE をサポートする必要がない場合は、foreignObject;を使用できます。HTML + CSS に対応しているため、最も簡単な方法です。

それ以外の場合、IE のサポートまたは移行が必要な場合は...

Mbostock にはWrapping Long Labelsの例があります。自明ではありませんが、他の状況でテキストをラップするために適応させることができます。

D3plusは、次のようにテキストの折り返しをサポートしています。

d3plus.textwrap()
  .container(d3.select("#rectWrap"))
  .draw();

D3plusを使っています。使い方はとても簡単です。しかし、D3plus にはおそらく望まない機能が他にもあるため、テキスト ラッピングのみを追加するプラグインであるd3textwrapを検討することもできます。

于 2015-06-04T16:00:38.453 に答える
0

svg:foreignObjectこれを機能させるには、HTMLなどで使用する必要がありますdiv。SVG 自体はテキストをラップしません。

于 2012-11-16T21:34:17.403 に答える