D3.JS 基于javascript的图表展示库<四>----基本元素选择与Table

来源：互联网发布：淘宝电子积木编辑：程序博客网时间：2024/05/20 10:10

代码在这里 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>

tab.js

function selectAllTd(){var tds = d3.selectAll("tbody td").style("color",function(d,i){  //选择tbody下的所有tdconsole.log("d is "+ d+" and i is " + i); //打印语句，因为没有绑定数据， 可以看到，d 输出的是 undefined,i则是下标，0，1，2，3 .....15return 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,3console.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显示一个objconsole.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();}