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用 adiv是要走的路。您提到的问题可以相对容易地解决。当您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 回答