circle pack layout円自体に沿って流れるテキストでいくつかの円にラベルを付けようとしています。
実験的なjsfiddleの 1 つを次に示します。
ご覧のとおり、上部を中心にして円に沿ってテキストをレンダリングできます。ただし、湾曲した SVG テキストのブラウザのレンダリングはひどいものです。しかし、私たちはそれを気にしないとしましょう。
ここに別のjsfiddleがあります
次の条件下で、このグラフに曲線ラベルを配置したいと思います。
- 円は州を表します (深さ == 1 のみ) (BRITISH COLUMBIA、ALBERTA など)
- 州のすべての子供のサイズ (つまり、割り当てられた議会の議席数) の合計が 5 を超えています。
- 州の名前はすべて大文字にする必要があります。
コード自体で私の試みのいくつかを見ることができます。私は何時間も努力してきました。私の主な問題は、円内の円が XY 空間のどこかにあるのに対し、最初の jsfiddle では、すべての円が座標系の原点に中心を持っていることです。
たぶん、これを再検討することで私を助けることができます。
基礎となるデータは、次の表に基づいています。
(注: これは、先日私が尋ねた「D3 フォース レイアウトのノードとしての円パック」という質問に多少関連していますが、これは独立した実験です。)
d3.svg.arc() の代わりに通常の SVG アークを使用することにしました。今でも正しい判断だと思います。ただし、ここに私が今持っているものがあります::) jsfiddle
