我正在嘗試使用d3創建鏈接到*.csv
文件的表,但我得到的只是一個空白網頁。 即使有克里米亞的例子,我也會得到一個空白頁面。
我將不勝感激被指示或顯示一個工作示例或我做錯的建議。創建鏈接到csv文件的表
回答
如果你問有關創建從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"]);
});
非常有趣。非常感謝您的幫助。 – 2012-03-08 18:21:56
很好的答案 - 謝謝! – 2012-08-20 17:50:10
這個例子目前無效,td元素爲空。你能看到這個問題http:// stackoverflow。com/questions/23399462/d3-table-example-yield-empty-td-tags – 2014-04-30 23:25:53
@Shawn_allen提出的答案中存在一個錯誤。
爲了解決它只是通過這一個
return {column: column, value: row[columns.indexOf(column)]};
享受改變的代碼
return {column: column, value: row[column]};
以下行!
通常,我需要定期刷新數據表。下面是我如何填充一個表數據:
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在他的回答中所展示的那樣),因爲我不需要這些。所以代碼更簡單。
我很抱歉在添加爲新的答案,但我沒有足夠的積分,將它添加註釋。稍微調整一下@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。
- 1. C#創建XLS或CSV文件,並創建鏈接,下載文件
- 2. 創建編輯鏈接到sharepoint文件
- 3. 創建鏈接到共享文件夾鏈接到MediaWiki
- 4. 如何創建日誌`csv`文件。其中包含有鏈接
- 5. 創建下載鏈接到文件服務器上的文件
- 6. 創建文件夾的符號鏈接
- 7. 從CSV文件創建數據表
- 8. 從csv文件創建元組列表
- 9. 如何創建可下載的鏈接到文本文件?
- 10. 創建CSV文件並保存到Blobstore
- 11. 創建鏈接到Outlook郵件
- 12. 列表中創建鏈接
- 13. 創建鏈接列表
- 14. 鏈接列表創建
- 15. Git:創建一個文件鏈接
- 16. Wicket:創建一個PDF文件鏈接
- 17. 創建一個CSV文件
- 18. bash創建csv文件
- 19. 更快創建CSV文件
- 20. 創建鏈接到匯合
- 21. SSRS創建鏈接到URL
- 22. 創建鏈接到Intel的ipp庫的mex文件
- 23. 從文本文件創建CSV文件
- 24. 如何創建本地存儲文件的超鏈接列表?
- 25. 使用CSV存儲引擎直接從CSV文件創建mysql表?
- 26. 創建HTML鏈接到另一個端口中的文件?
- 27. 如何創建一個錨鏈接到不同的.php文件?
- 28. 自動創建鏈接到文件夾中的內容
- 29. 如何創建從jsp頁面到war文件的鏈接
- 30. 的CentOS 5.5 - 符號鏈接創建到RPM spec文件
請給我們展示一些複製問題的代碼。 – Dogbert 2012-02-14 15:45:18
另請參閱D3文檔中爲selection.data()提供的示例:https://github.com/mbostock/d3/wiki/Selections#data – DGrady 2013-08-06 21:55:11