使用d3.js创建一个从csv文件中读取数据的表

Question

我必须使用d3.js创建一个可排序的表。给定链接中的代码：http://jsfiddle.net/89Lfpvhs/使用json数据填充表。用csv替换json，我无法得到表，因为在每次迭代时变量“rowsEnter”，“cellsEnter”的值保持不变，只显示表的一行。我使用csv数据粘贴了代码。代码中使用的data.csv是：

var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var canvas = d3.select(this.domNode).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 var headerGrp = canvas.append("g").attr("class", "headerGrp");

var fieldHeight = 30;
var fieldWidth = 90;var previousSort = null;
var format = d3.time.format("%a %b %d %Y");

/*

 var data = [
 { "id": 3, "name": "Richy", "male": true, "born": "Sun May 05 2013",   "amount": 12000},
 { "id": 1, "name": "Susi", "male": false, "born": "Mon May 13 2013", "amount": 2000},
 { "id": 2, "name": "Patrick", "male": true, "born": "Thu Jun 06 2013", "amount": 17000},
 { "id": 4, "name": "Lorenz", "male": true, "born": "Thu May 09 2013", "amount": 15000},
 { "id": 5, "name": "Christina", "male": false, "born": "Mon Jul 01 2013", "amount": 16000}
  ]; 

*/

d3.csv("data.csv", function(error, data) 
   {    
refreshTable(null);  
function refreshTable(sortOn)
{   
// create the table header  
 var header = headerGrp.selectAll("g")
    .data(d3.keys(data[0]))
  .enter().append("g")
    .attr("class", "header")
    .attr("transform", function (d, i){
        return "translate(" + i * fieldWidth + ",0)";
    })
    .on("click", function(d){ return refreshTable(d);});

header.append("rect")
    .attr("width", fieldWidth-1)
    .attr("height", fieldHeight);
    debugger;

header.append("text")
    .attr("x", fieldWidth / 2)
    .attr("y", fieldHeight / 2)
    .attr("dy", ".35em")
    .text(String);


data.forEach(function(d) {

var rowsGrp = canvas.append("g").attr("class","rowsGrp");
var rows = rowsGrp.selectAll("g.row").data(data, 
function(d){ return d.id; });

// create rows  
var rowsEnter = rows.enter().append("svg:g")
    .attr("class","row")
    .attr("transform", function (d, i){
        return "translate(0," + (i+1) * (fieldHeight+1) + ")";
    }); // select cells

  var cells = rows.selectAll("g.cell").data(function(d){return     d3.values(d);});

// create cells
var cellsEnter = cells.enter().append("svg:g")
    .attr("class", "cell")
    .attr("transform", function (d, i){
        return "translate(" + i * fieldWidth + ",0)";
    });

cellsEnter.append("rect")
    .attr("width", fieldWidth-1)
    .attr("height", fieldHeight);   

cellsEnter.append("text")
    .attr("x", fieldWidth / 2)
    .attr("y", fieldHeight / 2)
    .attr("dy", ".35em")
    .text(String);
  });

    //update if not in initialisation
     if(sortOn !== null) {
        // update rows
        if(sortOn != previousSort){
            rows.sort(function(a,b){return sort(a[sortOn], b[sortOn]);});           
            previousSort = sortOn;
        }
        else{
            rows.sort(function(a,b){return sort(b[sortOn], a[sortOn]);});
            previousSort = null;
        }
        rows.transition()
            .duration(500)
            .attr("transform", function (d, i){
                return "translate(0," + (i+1) * (fieldHeight+1) + ")";
            });

        //update cells
        // rows.selectAll("g.cell").select("text").text(String);
      }
   }function sort(a,b){
if(typeof a == "string"){
    var parseA = format.parse(a);
    if(parseA){
        var timeA = parseA.getTime();
        var timeB = format.parse(b).getTime();
        return timeA > timeB ? 1 : timeA == timeB ? 0 : -1;
    }
    else 
        return a.localeCompare(b);
}
else if(typeof a == "number"){
    return a > b ? 1 : a == b ? 0 : -1;
}
else if(typeof a == "boolean"){
    return b ? 1 : a ? -1 : 0;
}
} });       

代码是：

    MessageDigest md = MessageDigest.getInstance("SHA1");
       md.update(password.getBytes("UTF8"));
 //      Base64 base64 = new Base64();
       byte[] hash = md.digest();
       String sshaPassword = new String(Base64.encodeBase64(hash));
       return "{SSHA}" + sshaPassword;