设置文本宽度或在div中放置文本 [英] Set text width or put text in a div

问题描述

我想能够在D3中设置文本元素的宽度。现在我有一些文本在一个圆圈，但我不能设置此元素的宽度。 （让我们说 nodeEnter 是我的图中的一个节点）

I would like to be able to set the width of a text element in D3. For now I have some text in a circle but I cannot set the width of this element. (let's say that nodeEnter is a node in my graph)

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 ）。我现在的方式如下：

What I would like is to find a simple way of setting the width of that text element (with the overflow going down, as in a simple div). The way I have right now is the following:

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轴上）。

However I don't think that it is the best solution, for example everything I set in myCSS is overwriten. Moreover I don't know how to center the foreign Object in the circle (especially on the x axis).

感谢您的帮助。

推荐答案

如果您想要自动换行， foreignObject c $ c> div 是要走的路。你提到的问题可以相对容易地固定。当您为svg元素设置 myCSS 时，不会为<$​​ c $ c> div 设置它。如果在添加 div 后添加该行以设置CSS类，则应该选择这些设置。

If you want automatic line wrapping, foreignObject with a div is the way to go. The problems you mention can be fixed relatively easily. While you're setting myCSS for the svg element, you're not setting it for the div. If you add the line to set the CSS class after appending the div, it should pick up the settings.

将文本居中的最简单方法是设置 div 的大小以触摸圆的边缘，并添加CSS以使文本在 div 。

The easiest way to center the text is probably to set the size of the div to touch the edges of the circle and add the CSS to center the text within the div.

这篇关于设置文本宽度或在div中放置文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！