Création d'une table liée à un fichier csv

Question

J'essaie de créer une table liée à une *.csv en utilisant d3, mais tout ce que j'obtiens, c'est une page web vide. Même avec l'exemple de la Crimée, j'obtiens une page blanche.
Je serais reconnaissant si l'on me donnait des instructions, si l'on me montrait un exemple fonctionnel ou si l'on me suggérait ce que je faisais mal.

Answer 1

Si vous demandez à créer un tableau HTML à partir de données CSV, c'est ce que vous voulez :

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

Consultez le exemple de travail . Si vous copiez ce code, vous devrez mettre à jour l'adresse de l'utilisateur. tabulate() afin qu'elle sélectionne soit une table existante, soit un conteneur différent (au lieu de "#container" ), vous pouvez alors l'utiliser avec des données CSV comme suit :

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

Answer 2

Il y a un bug dans la réponse proposée par @Shawn_allen.

Pour résoudre ce problème, il suffit de modifier la ligne de code suivante

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

par celui-ci

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

Profitez-en !

Answer 3

Il m'arrive souvent de devoir rafraîchir périodiquement un tableau de données. Voici comment je remplis un tableau de données :

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

Notes :

• J'aime placer les en-têtes de tableau dans le code HTML, plutôt que de les générer à partir de JavaScript.
• Je n'ai pas attaché les données aux lignes et aux cellules du tableau (comme @Shawn le montre dans sa réponse), car je n'en ai pas besoin. Le code est donc plus simple.

<a href="http://jsfiddle.net/mrajcok/xywo7h90/" rel="nofollow">fiddle</a>

Answer 4

Je suis désolé d'ajouter ceci en tant que nouvelle réponse mais je n'ai pas assez de points pour l'ajouter en tant que commentaire. Juste une petite modification à la fin du code de @Shawn_Allen. Je crois que cela fonctionne aussi.

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

}) ;

Il n'y avait pas besoin de créer ce JSON avec la colonne, la valeur.