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

ヒートマップをDOMに表示する

D3.jsは表示処理は行わないため、SVG、canvasだけではなく、HTMLのdiv要素を使いグラフを表示することができます、ヒートマップもdiv要素を表示することができます。ヒートマップのような単純なものであれば、SVGよりdiv要素のほうが簡単です。

最初に、スタイルシートでヒートマップの四角形の幅、高さを設定する。

D3.jsでdiv要素の表示位置と背景色を設定し安栖。表示位置を表す座標ですが、div要素のときは、X座標を指定する場合はスタイルシートのleftプロパティ、Y座標を指定する場合はスタイルシートのtopプロパティです。値は”px”という単位を付します。塗り潰す色は背景色を指定するbackground-colorプロパティで色を指定します。

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

コメント

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