2012-02-13 83 views
42

我正在嘗試使用d3創建鏈接到*.csv文件的表,但我得到的只是一個空白網頁。 即使有克里米亞的例子,我也會得到一個空白頁面。
我將不勝感激被指示或顯示一個工作示例或我做錯的建議。創建鏈接到csv文件的表

+5

請給我們展示一些複製問題的代碼。 – Dogbert 2012-02-14 15:45:18

+0

另請參閱D3文檔中爲selection.data()提供的示例:https://github.com/mbostock/d3/wiki/Selections#data – DGrady 2013-08-06 21:55:11

回答

80

如果你問有關創建從CSV數據的HTML表,這是你想要什麼:

d3.csv("data.csv", function(data) { 
    // the columns you'd like to display 
    var columns = ["name", "age"]; 

    var table = d3.select("#container").append("table"), 
     thead = table.append("thead"), 
     tbody = table.append("tbody"); 

    // append the header row 
    thead.append("tr") 
     .selectAll("th") 
     .data(columns) 
     .enter() 
     .append("th") 
      .text(function(column) { return column; }); 

    // create a row for each object in the data 
    var rows = tbody.selectAll("tr") 
     .data(data) 
     .enter() 
     .append("tr"); 

    // create a cell in each row for each column 
    var cells = rows.selectAll("td") 
     .data(function(row) { 
      return columns.map(function(column) { 
       return {column: column, value: row[column]}; 
      }); 
     }) 
     .enter() 
     .append("td") 
      .text(function(d) { return d.value; }); 
}); 

退房的working example。如果您要複製該代碼,則需要更新tabulate()函數,以便它可以選擇現有的表格或不同的容器(而不是"#container"),然後可以使用CSV數據,如下所示:

d3.csv("path/to/data.csv", function(data) { 
    tabulate(data, ["name", "age"]); 
}); 
+0

非常有趣。非常感謝您的幫助。 – 2012-03-08 18:21:56

+3

很好的答案 - 謝謝! – 2012-08-20 17:50:10

+0

這個例子目前無效,td元素爲空。你能看到這個問題http:// stackoverflow。com/questions/23399462/d3-table-example-yield-empty-td-tags – 2014-04-30 23:25:53

4

@Shawn_allen提出的答案中存在一個錯誤。

爲了解決它只是通過這一個

return {column: column, value: row[columns.indexOf(column)]}; 

享受改變的代碼

return {column: column, value: row[column]}; 

以下行!

0

通常,我需要定期刷新數據表。下面是我如何填充一個表數據:

HTML:

<table id="t1"> 
    <thead> 
     <tr><th>Name<th>Age 
    </thead> 
</table> 

的JavaScript:

function tabulate(data, columns) { 
    var table = d3.select("#t1"); 
    table.select('tbody').remove(); // remove any existing data 
    var tbody = table.append('tbody'); 
    data.forEach(function(row) { 
    var tr = tbody.append('tr'); 
    columns.forEach(function(column) { 
     tr.append('td').text(row[column]); 
    }); 
    }); 
    return table; 
} 

注:

  • 我喜歡把表格標題中的HTML,而比從JavaScript生成它們。
  • 我沒有將數據附加到表格行和單元格(就像@Shawn在他的回答中所展示的那樣),因爲我不需要這些。所以代碼更簡單。

fiddle

0

我很抱歉在添加爲新的答案,但我沒有足夠的積分,將它添加註釋。稍微調整一下@Shawn_Allen代碼的結尾。我相信這也能起作用。

//create a cell in each row for each column 
var cells = rows.selectAll("td") 
    .data(function(row) { 
     return columns.map(function(column) { 
      return row[column]; 
     }); 
    }) 
    .enter() 
    .append("td") 
     .text(function(d) { return d; }); 

});

沒有必要創建該列,值的JSON。