はじめに
http://blogs.yahoo.co.jp/dk521123/35480801.htmlで行ったonmouseイベントをとったが、 今回は、clickイベントからモーダルダイアログを表示する
サンプル
http://blogs.yahoo.co.jp/dk521123/35435961.htmlの円グラフをクリックしたらモーダルダイアログが表示する
<html> <head> <meta charset="UTF-8"> <style> .modal-content { position:fixed; display:none; z-index:2; width:50%; margin:0; padding:10px 20px; border:2px solid #aaa; background:#fff; } .modal-content p { margin:0; padding:0; } .modal-overlay { z-index:1; display:none; position:fixed; top:0; left:0; width:100%; height:120%; background-color:rgba(0,0,0,0.75); } .modal-close { color:#00f; text-decoration:underline; } .modal-close:hover { cursor:pointer; color:#f00; } </style> </head> <body> <script src="">https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> <script src="">http://d3js.org/d3.v3.js"> <script> var dataset = [ {graphLegend:"001", graphValue:10, graphColor:"LightPink"}, {graphLegend:"002", graphValue:20, graphColor:"LightCyan"}, {graphLegend:"003", graphValue:30, graphColor:"LightGoldenrodYellow"}, {graphLegend:"004", graphValue:25, graphColor:"Aquamarine"}, {graphLegend:"005", graphValue:10, graphColor:"MistyRose"} ]; var width = 960, height = 500, radius = Math.min(width, height) / 2; var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.graphValue; }); var tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "20") .style("visibility", "hidden"); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var g = svg.selectAll(".arc") .data(pie(dataset)) .enter().append("g") // ★注目★ .on("click", function(){ // オーバーレイ用の要素を追加 $('body').append('<div class="modal-overlay"></div>'); // オーバーレイをフェードイン $('.modal-overlay').fadeIn('slow'); // モーダルコンテンツのIDを取得 var modal = '#modalDialog'; // モーダルコンテンツの表示位置を設定 modalResize(); // モーダルコンテンツフェードイン $(modal).fadeIn('slow'); // 「.modal-overlay」あるいは「.modal-close」をクリック $('.modal-overlay, .modal-close').off().click(function(){ // モーダルコンテンツとオーバーレイをフェードアウト $(modal).fadeOut('slow'); $('.modal-overlay').fadeOut('slow',function(){ // オーバーレイを削除 $('.modal-overlay').remove(); }); }); // リサイズしたら表示位置を再取得 $(window).on('resize', function(){ modalResize(); }); // モーダルコンテンツの表示位置を設定する関数 function modalResize(){ // ウィンドウの横幅、高さを取得 var w = $(window).width(); var h = $(window).height(); // モーダルコンテンツの表示位置を取得 var x = (w - $(modal).outerWidth(true)) / 2; var y = (h - $(modal).outerHeight(true)) / 2; // モーダルコンテンツの表示位置を設定 $(modal).css({'left': x + 'px','top': y + 'px'}); } }) g.append("path") .attr("d", arc) .style("fill", function(d) { return d.data.graphColor; }) // アニメーション効果 .transition() .duration(1000) // 1秒間でアニメーションさせる .attrTween("d", function(d){ var interpolate = d3.interpolate( { startAngle : 0, endAngle : 0 }, { startAngle : d.startAngle, endAngle : d.endAngle } ); return function(t){ return arc(interpolate(t)); } }); g.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".35em") .style("text-anchor", "middle") .text(function(d) { return d.data.graphLegend; }); </script> <div id="modalDialog" class="modal-content"> <p>表示できた？</p> <p><a class="modal-close">閉じる</a></p> </div> </body> </html>
