創建鏈接到csv文件的表

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

2012-02-13 adam.888

請給我們展示一些複製問題的代碼。 – 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

如果你問有關創建從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-02-29 22:32:48

非常有趣。非常感謝您的幫助。 – 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]};

以下行！

來源

2014-10-02 02:12:01

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

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

來源

2015-03-03 18:48:37

我很抱歉在添加爲新的答案，但我沒有足夠的積分，將它添加註釋。稍微調整一下@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。

來源

2015-05-22 05:24:22 Ben

創建鏈接到csv文件的表

回答

相關問題