nakunaru/gist:4619047

## gistfile1.js
<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>
	<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>