d3.js - 如何自动换行圆环图的图例文本

Question

我有一个带有图例的圆环图。

问题是图例的文本太长，超出了容器的大小。

如何进行自动换行，以便文本在下一行继续？

我尝试设置 word-wrap: break-word 属性，但没有成功。

Answer 1

如@cuckovic 所述，您可以使用 <foreignObject>自动换行。这方面的一个例子是:

<svg width="400px" height="300px">
.
.
    <foreignObject width="100" height="50">
        <p>Here is a paragraph that requires word wrap.</p>
    </foreignObject>
.
.
</svg>

给出的例子取自 Mozilla 开发者网站 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject