Создание таблицы, связанной с файлом csv

Question

Я пытаюсь создать таблицу, связанную с файлом *.csv, используя d3, но все, что я получаю, - это пустая веб-страница. Даже на примере Крыма я получаю пустую страницу.
Я был бы признателен, если бы был направлен или показан рабочий пример или предложение о том, что я делаю неправильно.

Answer 1

Если вы спрашиваете о создании таблицы HTML из данных CSV, это то, что вы хотите:

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 следующим образом:

Answer 2

В ответе, предложенном @Shawn_allen, есть ошибка.

Для решения это просто измените следующую строку кода

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

этим один

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

Наслаждайтесь!

Answer 3

Часто мне нужно периодически обновлять таблицу данных. Вот как я заполнить таблицу с данными:

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

Answer 4

Я сожалею, чтобы добавить это в качестве нового ответа, но у меня нет достаточно очков, чтобы добавить его в качестве комментария. Просто слегка подкорректируйте конец кода @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 со столбцом, значением.