
360
16 章 D3 入門
−
棒グラフ
はそのような要素はありません。棒がなければ、一体何にデータをバインディングするのでしょう
か。実は、
D3
は水面下でデータを管理しているのです。重要なこととして、
data
が返す
bars
オ
ブジェクトは
nobelData
をバインディングする
DOM
要素を知っていますが、
nobelData
はバイン
ディングされていません。次に、基本的な
enter
メソッドの使用方法を説明します。
16.7
enter
メソッド
D3
の
enter
(
https://github.com/d3/d3/blob/master/CHANGES.md#selections-d3-
selection
)メソッド(およびその仲間の
exit
)は
D3
の優れた能力と表現力の基盤であると同時
に、多くの混乱の元でもあります。
D3
のスキルを伸ばしたければ、このメソッドに深いレベルで
真剣に向き合うべきです。ここでは、単純な例を紹介しましょう。
標準的で単純な小さなデモから始め、ノーベル賞データの各メンバーに棒の長方形を追加しま
す。バインディングするデータとして上位
6
つの受賞国を使います。
var nobelData = [
{key:'United States', value:200},
{key:'United Kingdom', value:80},
{key:'France', value:47},
{key:'Switzerland', value:23},
{key:'Japan', value:21}, ...