javascript - 设置文本宽度或将文本放入 div 中

Question

我希望能够在 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 轴上)。

预先感谢您的帮助。

Answer 1

如果您想要自动换行，带有 div 的 foreignObject 是最佳选择。您提到的问题可以相对容易地解决。当您为 svg 元素设置 myCSS 时，您没有为 div 设置它。如果您在附加 div 之后添加行来设置 CSS 类，它应该会获取设置。

使文本居中的最简单方法可能是设置 div 的大小以接触圆的边缘，并添加 CSS 使文本在 div 内居中>.