Создание таблицы, связанной с CSV-файлом - PullRequest
Новая
       7

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

44 голосов
/ 14 февраля 2012

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

Ответы [ 4 ]

80 голосов
/ 01 марта 2012

Если вы спрашиваете о создании таблицы 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; });
});

Проверьте рабочий пример . Если вы копируете этот код, вам нужно обновить функцию tabulate(), чтобы она либо выбирала существующую таблицу, либо другой контейнер (а не "#container"), тогда вы можете использовать ее с данными CSV следующим образом: 

d3.csv("path/to/data.csv", function(data) {
  tabulate(data, ["name", "age"]);
});
5 голосов
/ 02 октября 2014

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

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

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

на эту 

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

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

1 голос
/ 03 марта 2015

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

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 в своем ответе), потому что у меня нетпотребность в этом.Так что код проще.

скрипка

0 голосов
/ 22 мая 2015

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

...