前回のまでの記事で、HTML上にあるボタンをクリックして
グラフを変化させました。D3.jsではSVG要素にもイベントを
設定することができます。
SVG要素にイベントを設定する場合もon()メソッドを使います。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>D3.js 表示された棒グラフをクリックすると色が変わる</title> <style> svg{ width:400px; height:300px; border:solid 1px green; } /* rect要素で設定するstyleプロパティ ここでのプロパティはSVG用の物です。 */ #sampleGraph rect{ stroke:#900000; stroke-width:2px; fill:#c0c0c0; } </style> <script src="../js/d3.js"></script> </head> <body> <h1>棒グラフをクリックすると色が変更できます。</h1> <svg id="sampleGraph"></svg> <script src="test.js"></script> </boby> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var dataSet = [250,100,50,20,300]; d3.select("#sampleGraph") //SVG要素を指定 .selectAll("rect") //SVGで四角形を示す要素を指定 .data(dataSet) //データを設定 .enter() //データ数に応じ、rect要素を生成 .append("rect") //SVG四角形を生成 .attr("x",0) //棒グラフの表示場所 X座標 .attr("y",function(d,i){ return i * 32; }) //棒グラフの表示場所 Y座標 .attr("width",function(d,i){ return d + "px"; }) //棒グラフの横幅 .attr("height","24px") //棒グラフの高さ .on("click",function(){ /* d3.select(this)と書くことで クリックされた棒グラフそのものを指定できる。 */ d3.select(this) /* style()メソッド 第１引数：設定したいスタイルプロパティ名 第２引数：設定したい値 */ .style("fill","#76e0c0"); }); |
今回は、棒グラフをクリックしたら棒グラフの色を緑に変更します。
on()メソッドもメソッドチェーン内に書くことができます。
D3.jsでは、d3.select(this)とすることで、クリックされた要素そのものを
指定できます。要素を指定したらスタイルを変更します。
スタイルの指定はattr()メソッドを使うこともできますが、
style()メソッドの第１引数に、スタイルプロパティ名、第２引数に
設定する値を指定します。