Last active
December 11, 2015 15:09
-
-
Save nakunaru/4619047 to your computer and use it in GitHub Desktop.
d3.js sample
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script type="text/javascript" src="d3.v3.js"></script> | |
| <style type="text/css"> | |
| .result{ | |
| float: left; | |
| margin: 10px; | |
| } | |
| .tab{ | |
| border: 1px solid black; | |
| width: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>SQL Trace 結果参照</h1> | |
| <script language="javascript"> | |
| // ***元データ*** | |
| // 改善前 | |
| var data1 = [ | |
| { | |
| "call": "parse", | |
| "count": "1", | |
| "cpu": "0.04", | |
| "elapsed": "0.46", | |
| "disk": "0", | |
| "query": "0", | |
| "current": "0", | |
| "rows": "0" | |
| }, | |
| { | |
| "call": "execute", | |
| "count": "1", | |
| "cpu": "0.00", | |
| "elapsed": "0.00", | |
| "disk": "0", | |
| "query": "0", | |
| "current": "0", | |
| "rows": "0" | |
| }, | |
| { | |
| "call": "fetch", | |
| "count": "2", | |
| "cpu": "0.00", | |
| "elapsed": "0.12", | |
| "disk": "30", | |
| "query": "628", | |
| "current": "0", | |
| "rows": "9" | |
| } | |
| ]; | |
| // 改善後 | |
| var data2 = [ | |
| { | |
| "call": "parse", | |
| "count": "1", | |
| "cpu": "0.02", | |
| "elapsed": "0.04", | |
| "disk": "0", | |
| "query": "0", | |
| "current": "0", | |
| "rows": "0" | |
| }, | |
| { | |
| "call": "execute", | |
| "count": "1", | |
| "cpu": "0.00", | |
| "elapsed": "0.00", | |
| "disk": "0", | |
| "query": "0", | |
| "current": "0", | |
| "rows": "0" | |
| }, | |
| { | |
| "call": "fetch", | |
| "count": "2", | |
| "cpu": "0.00", | |
| "elapsed": "0.00", | |
| "disk": "0", | |
| "query": "66", | |
| "current": "0", | |
| "rows": "9" | |
| } | |
| ]; | |
| </script> | |
| <!-- 結果table --> | |
| <div class="result"> | |
| <table id="result1" class="tab"> | |
| <tr> | |
| <th>call</th> | |
| <th>count</th> | |
| <th>cpu</th> | |
| <th>elapsed</th> | |
| <th>disk</th> | |
| <th>query</th> | |
| <th>current</th> | |
| <th>rows</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="result"> | |
| <table id="result2" class="tab"> | |
| <tr> | |
| <th>call</th> | |
| <th>count</th> | |
| <th>cpu</th> | |
| <th>elapsed</th> | |
| <th>disk</th> | |
| <th>query</th> | |
| <th>current</th> | |
| <th>rows</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <script language="javascript"> | |
| var result1_tr = d3.select('#result1').select('tbody').selectAll('tr').append('tr').data(data1).enter().append('tr'); | |
| var result1_td = result1_tr.selectAll('td').data(function(d){return d;}).enter().append('td').text(function(d){return d;}); | |
| alert(result1_td); | |
| /////////////////////// | |
| var matrix = [ | |
| [11975, 5871, 8916, 2868], | |
| [ 1951, 10048, 2060, 6171], | |
| [ 8010, 16145, 8090, 8045], | |
| [ 1013, 990, 940, 6907] | |
| ]; | |
| var tr = d3.select("body").append("table").style("border","1px").selectAll("tr"). | |
| data(matrix).enter().append("tr"); | |
| var td = tr.selectAll("td").data(function(d){ | |
| return d; | |
| }).enter().append("td").text(function(d){ | |
| return d; | |
| }); | |
| ///////// | |
| d3.select('body').selectAll('p').data([1,2,3,4,5]). | |
| enter().append('p'). | |
| text(function(d){return d;}); | |
| </script> | |
| <p></p> | |
| <p></p> | |
| <p></p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://github.com/mbostock/d3/wiki/API-Reference
http://sssslide.com/www.slideshare.net/kadoppe/d3js#
http://ja.d3js.node.ws/