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

Question

我有一个带有图例的甜甜圈图。

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

如何执行自动换行以使文本在下一行继续？

我尝试设置word-wrap: break-word属性，但它不起作用。

Answer 1

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

<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