0

D3 でテキスト要素の幅を設定できるようにしたいと考えています。今のところ、円の中にテキストがありますが、この要素の幅を設定できません。nodeEnter（それが私のグラフのノードだとしましょう）

nodeEnter.append("circle")
    .attr("r", function(d){return d.radius+"px";});

/* Add text in middle of circle */
nodeEnter.append('text')
    .text("this is a very long text");

私が望むのは、そのテキスト要素の幅を設定する簡単な方法を見つけることです(単純なように、オーバーフローが下がりdivます)。私が今持っている方法は次のとおりです。 

nodeEnter.append("circle")
    .attr("r", function(d){return d.radius+"px";});

/* Add text in middle of circle */ 
nodeEnter.append("foreignObject")
    .attr("width", 130)
    .attr("height", 200)
    .attr("class", "myCSS")
    .append("xhtml:div")
    .html("this is a very long text");

myCSSただし、設定したものがすべて上書きされるなど、それが最善の解決策だとは思いません。さらに、外部オブジェクトを円の中心に配置する方法がわかりません (特に x 軸上)。

よろしくお願いします。

4

2 に答える 2

1

自動行折り返しが必要な場合はforeignObject、aを使用するのdivが最適です。あなたが言及する問題は比較的簡単に修正することができます。svg要素を設定している間はmyCSS、svg要素を設定していませんdiv。を追加した後でCSSクラスを設定する行を追加するとdiv、設定が取得されます。

テキストを中央に配置する最も簡単な方法divは、円の端に触れるようにのサイズを設定し、CSSを追加してテキストを。内の中央に配置することdivです。

于 2012-12-10T18:36:01.143 に答える
1

円を作成するだけの場合は、常に通常の HTML 要素を使用して円を作成し、絶対配置を使用してそれらを配置できます。

http://jsfiddle.net/FPkxV/

HTML:

<p><span></span><span>This is some text which will wrap if it gets too long!</span></p>​

CSS:

* { margin: 0; padding: 0; }
body { font: 10px sans-serif; }
p { 
    background: red;
    text-align: center;
    border-radius: 50px; 
    width: 100px; 
    height: 100px; }
p span { 
    vertical-align: middle;
    display: inline-block; }
p span:first-child { height: 100px; }

これには、 IE7 と IE8 でサポートされているという利点もあります。

于 2012-12-10T18:52:41.987 に答える