d3.js - ドーナツ グラフの凡例テキストをワード ラップする方法

Question

凡例付きのドーナツ チャートがあります。

問題は、凡例のテキストが長すぎて、コンテナーのサイズからはみ出すことです。

テキストが次の行に続くようにワードラップを実行するにはどうすればよいですか?

プロパティを設定しようとしword-wrap: break-wordましたが、うまくいきませんでした。

Answer 1

<foreignObject>@cuckovicが述べたように、ワードラップに使用できます。この例は次のようになります。

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

この例は、 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObjectの Mozilla 開発者のサイトから取得したものです。