d3.js - D3 を使用して x 軸のみのグラフを作成する

Question

以下のようなグラフを作成するためのチュートリアルを探したいのですが、そのようなグラフの名前がわかりません。

そのようなグラフの名前を教えてください。または、チェックアウトできるチュートリアルを教えてください。

Answer 1

あなたが示した種類のチャートは、より一般的に「ゲージ」と呼ばれ、何らかの形の目標への進捗を示します。

(余談ですが、D3 の軸はスケールの視覚的なレンダリングです。したがって、この場合に必要なのは軸ではなくスケールです!)

これに D3 を使用するのはやり過ぎです。単純な比率計算により、塗りつぶされたセクションの「サイズ」が得られます。次に、このゲージを CSS を使用した単純な HTML としてレンダリングして、角を丸くしたり塗りつぶしたりできます。