
432
20 章 メニューバー
ラジオボタンフォームが用意できました。あとはすべての入力を選択し、変更を引き起こすボタ
ン押下に対応するコールバック関数を追加するだけです。
d3.selectAll('#metric-radio input').on('change', function() {
var val = d3.select(this).property('value');
nbviz.valuePerCapita = parseInt(val); #
❶
nbviz.onDataChange();
});
❶
onDataChange
を呼び出して視覚要素の再描画を開始する前に
valuePerCapita
の値を更新する。
ボタンの現在の状態を
valuePerCapita
整数に格納します。ユーザがラジオボックスを選択する
とこの値が変わり、
onDataChange
によって新しい受賞者数スケールで再描画されます。
これで
Nobel-viz
にメニューバー要素を追加できたので、ユーザが表示するデータセットを精査
して最も関心があるサブセットに絞り込むことができます。
20.3
まとめ
本章では、ノーベル賞可視化にセレクタやラジオボタン要素を追加する方法を説明しました。ボ
タングループ、チェックボックスのグループ、時間選択、普通のボタンなど、他にも多くのユーザ
インタフェース
HTML
タグがあります
†
。しかし、このようなコントローラの実装には本章で示し
たものと同じパターンを利用します。データのリストを使って ...