スポンサーリンク
スポンサーリンク

D3.jsを複数の棒グラフを表示する

前回の記事では、四角形と一本の棒グラフを表示させました。
しかし、データが複数がある場合は、データの数だけ
append(“rect”)とattr()を使い四角形を生成すればいいでしょうか。

表示する棒が5本ならいいですが、30,40も棒グラフあったら大変です。
D3.jsにはデータの塊(データセット)に応じて自動的に要素を
追加・削除する機能が用意されています。
selectAll(),data(),enter()メソッドです。これらを使えば、
共通する属性をまとめて指定しながら、データの数に応じて
複数のrect要素を生成できます。

サンプルコードの実行結果はこちら

index.html

test.js

SVGのrect要素のスタイルシートのプロパティ

プロパティ 説明
fill 図形の塗りつぶされた色を指定。red,rgb(0,255,0),#ff0000とか
stroke 図形の線の色を指定。red,rgb(0,255,0),#ff0000とか
stroke-width 図形の線幅 単位px

コメント

タイトルとURLをコピーしました