D3.JS 基于javascript的图表展示库<四>----基本元素选择与Table
代码 在 这里 http://download.csdn.net/detail/a6383277/5205910
看代码：
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Data</title>
<script type="text/javascript" src="lib/d3.v3.js"></script>
<script type="text/javascript" src="tab.js"></script>
</head>
<body>
<table>
<thead>
<tr><td> A</td><td> B</td><td> C</td><td> D</td></tr>
</thead>
<tbody>
<tr><td> 00</td><td> 01</td><td> 02</td><td> 03</td></tr>
<tr><td> 04</td><td> 05</td><td> 06</td><td> 07</td></tr>
<tr><td> 08</td><td> 09</td><td> 10</td><td> 11</td></tr>
<tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
</tbody>
</table>
<div>
<input type="button" value="selectAllTd()" onclick="selectAllTd()"/>
<input type="button" value="selectAllTd()" onclick="selectAllTdByTr()"/>
</div>
</body>
</html>
function selectAllTd(){
var tds = d3.selectAll("tbody td").style("color",function(d,i){ //选择tbody下的所有td
console.log("d is "+ d+" and i is " + i); //打印语句，因为没有绑定数据， 可以看到，d 输出的是 undefined,i则是下标，0，1，2，3 .....15
return i%3 !== 0 ? null : "red"; //把所有 下标（下标从0开始） 为3倍数的td设为红色字体
});
}
function selectAllTdByTr(){
//先选择tr，在选择td
//实际形成的数据结构就相当于
/*
[[td,td,td,td],[td,td,td,td],[td,td,td,td],[td,td,td,td]]
*/
var tds = d3.selectAll("tbody tr")
.attr("id",function(d,i){ //为了便于清楚 绑定的方式，给每个tr赋值
return "tdId"+i;
})
.selectAll("td");
tds.style("color",function(d,i){ //这里就是分别遍历四个[td,td,td,td]中的td,那么下标应该为 0,1,2,3,0,1,2,3,0,1,2,3,0,1,2,3
console.log(i);//打印下标
return i%3 !== 0 ? null : "red";
//i%3是为了证明 下标不是0~15 而是0~3. 如果是0~15那么 表格上显示的04就不是红色。因为04的下标是4。也可以根据控制台打印输出可以看出
});
}
第二个demo: index02.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Data</title>
<script type="text/javascript" src="lib/d3.v3.js"></script>
<script type="text/javascript" src="tab02.js"></script>
</head>
<body>
<table>
<thead>
<tr><td> A</td><td> B</td><td> C</td><td> D</td></tr>
</thead>
<tbody>
</tbody>
</table>
<p>现在table中除了表头什么都没有。</p>
<input type="button" value="Click Me" onclick="btnClick()"/>
<input type="button" value="绑定json数据" onclick="btnClickObj()"/>
<table>
<thead>
<tr><td> 名字</td><td> 性别</td><td> 年龄</td></tr>
</thead>
<tbody id="obj">
</tbody>
</table>
</body>
</html>
tab02.js
//接着index.html和tab.js来看。
//修改一下方法，让它绑定一些数据
//点击一下index02.html中的按钮
function testSelectAllTdByGroup(){
var matrix = [
[ "00A", "01A", "02A", "03A"],
[ 4, 5, 6, 7],
[ 8, 9, 10, 11],
[12, 13, 14, 15],
]; //定义二维数组
// var trs = d3.selectAll("tbody tr").data(matrix).enter().append("tr"); //这样写是错误的！！
// 因为d3选择器的默认父节点是doucment的根节点<html>,不能直接在根节点添加tr元素在根节点。所以在加入节点前先选择一个父节点。就像下面一样
var trs = d3.select("tbody").selectAll("tr").data(matrix); //先选择一个父节点 tbody
trs = trs.enter().append("tr");//插入元素
var tds = trs.selectAll("td")
.data(function(d,i){
return d; //依次把matrix[i]给 每个tr里面的td
});
tds = tds.enter().append("td");
tds.html(function(d){return d});
}
//一般情况下 我们不会使二维数组这种理想的数据，通常绑定的是一个object对象的json格式。如[{name:"A",sex:"girl",age:15},{name:"B",sex:"boy",age:16},...]
//当然 其实也不会使用d3来处理一般的表格。这里只是写个demo而已
var objs =[
{name:"A",sex:"girl",age:15},
{name:"B",sex:"boy",age:16}
];
//这种对象数组和二维数组其实和相似，变换一下就可以了
function bindObj(){
var trs = d3.select("#obj").selectAll("tr").data(objs); //先选择一个父节点 ,选择所有的tr 绑定数据
trs.enter().append("tr");
//这个就是转换下数据的格式了
var tds = trs.selectAll("td").data(function(d,i){ //这里实际上就是把obj分别分配给tr，一个tr显示一个obj
console.log("第"+i+"对象是："+JSON.stringify(d)); //可以查看打印语句
var arr = []; //定义一个数组装属性
for(index in d){
arr.push(d[index]);//把每个属性的值放入数组中
}
return arr;
});
tds.enter().append("td").html(String); //添加td 并展示内容
}
//定义页面上按钮的响应事件
function btnClick(){
testSelectAllTdByGroup();
}
function btnClickObj(){
bindObj();
}