1つのボタン
ここでは、HTMLのボタンを使い、CSSでボタンのデザインを行う方法を解説します。以下のファイルをダウンロードしてください。このファイルを改変します。
まずbody内のp要素をボタンに変更します。
1 2 3 4 5 | //変更前 <p>クリックするとデータを更新します</p> ↓ //変更後 <button type="button" id="buttonA">Aボタン</button> |
CSSでボタンのデザインを定義し追加します。
1 2 3 4 5 6 7 8 9 10 11 | button{ display: block; /*縦にボタンを並べる*/ width: 60px; height: 30px; background-color: #FFCC00; margin-bottom:10px; outline: none; /*枠線は表示しない*/ } button:hover { background-color: #deb887; /*マウスオーバー時の色*/ } |
クリックイベントを、d3.selectAll(“p”)からd3.selectAll(“button”)に変更します。
1 2 3 4 5 6 7 8 | //変更前 d3.select("p") .on("click", function() { ↓ //変更後 d3.select("button") .on("click", function() { |
ボタンを押すと棒グラフが更新されます。

複数のボタン
ボタンは幾つでも追加することができます。既に1つのボタンを作成している(button_single)ので、そのファイルを変更しましょう。
ボタンタグを2つに増やします。
1 2 | <button type="button" id="buttonA">Aボタン</button> <button type="button" id="buttonB">Bボタン</button> |
クリックイベントを以下のように変更します。ポイントは、ボタンのidを取得し変数buttonIDに格納し、それぞれのボタンの場合に更新する配列をif文を使って変更します。
1 2 3 4 5 6 7 8 9 10 11 12 | //ボタンをクリックして新しいデータに更新 d3.selectAll("button") //selectAllにすることが重要 .on("click", function() { //ボタンのidを取得 var buttonID = d3.select(this).attr("id"); if (buttonID == "buttonA") { //ボタンAの場合、 dataset = [10, 5, 3, 20, 4, 8, 11, 3, 6, 9, 20, 4, 5, 8, 23]; }else{ //それ以外(ボタンB) dataset = [ 4, 8, 20, 10, 15, 7, 18, 9, 20, 15, 23, 22, 5, 7, 8 ]; } |
ボタンAとボタンBをそれぞれ押すことで、棒グラフが変化します。
