Tạo bảng được liên kết với tệp csv

Question

Tôi đang cố tạo bảng được liên kết với tệp *.csv bằng d3, nhưng tất cả những gì tôi nhận được là một trang web trống. Ngay cả với ví dụ Crimea tôi nhận được một trang trống.
Tôi sẽ rất biết ơn khi được chỉ dẫn hoặc thể hiện một ví dụ làm việc hoặc gợi ý về những gì tôi đang làm sai.

Answer 1

Nếu bạn đang hỏi về việc tạo ra một bảng HTML từ dữ liệu CSV, đây là những gì bạn muốn:

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; }); 
}); 

Kiểm tra các working example. Nếu bạn đang sao chép mã đó, bạn sẽ cần cập nhật hàm tabulate() để chọn bảng hiện tại hoặc vùng chứa khác (thay vì "#container"), sau đó bạn có thể sử dụng nó với dữ liệu CSV như sau:

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

Answer 2

Có lỗi trong câu trả lời được đề xuất bởi @Shawn_allen.

Để giải quyết nó chỉ cần thay đổi dòng sau mã

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

của thành viên này một

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

Thưởng thức!

Answer 3

Thông thường, tôi cần làm mới một bảng dữ liệu định kỳ. Đây là cách tôi cư một bảng với dữ liệu:

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; 
} 

Ghi chú:

• Tôi muốn đặt tiêu đề bảng trong HTML, chứ không phải hơn là tạo chúng từ JavaScript.
• Tôi đã không đính kèm dữ liệu vào các hàng và ô của bảng (như @Shawn hiển thị trong câu trả lời của mình), bởi vì tôi không có nhu cầu về điều đó. Vì vậy, mã đơn giản hơn.

fiddle

Answer 4

Tôi xin lỗi để thêm video này như là một câu trả lời mới nhưng tôi không có đủ điểm để thêm nó vào phần nhận xét. Chỉ cần một chút tinh chỉnh để kết thúc mã của @Shawn_Allen. Tôi tin rằng điều này cũng hoạt động.

//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; }); 

});

Không cần phải tạo JSON đó bằng cột, giá trị.