web-dev-qa-db-fra.com

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

J'essaie de créer une table liée à un fichier *.csv à l'aide de d3, mais tout ce que j'ai est une page Web vierge . Même avec l'exemple de Crimée, je reçois une page vierge.
Je serais reconnaissant de recevoir ou de montrer un exemple de travail ou une suggestion de ce que je fais mal.

javascriptd3.jshtml-table
44
adam.888

Si vous souhaitez créer un tableau HTML à partir de données CSV, voici ce que vous souhaitez:

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

Découvrez le exemple de travail . Si vous copiez ce code, vous devez mettre à jour la fonction tabulate() pour qu'elle sélectionne une table existante ou un conteneur différent (plutôt que "#container"). Vous pouvez ensuite l'utiliser avec les données CSV comme suit:

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

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

Pour le résoudre, il suffit de changer la ligne de code suivante 

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

par celui-ci

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

Prendre plaisir !

4
Fopa Léon Constantin

Souvent, je suis en train de regarder les données du jour. Donc, voici le tableau avec les 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;
}

Anmerkungen:

  • Vous êtes le premier ou le dernier utilisateur à utiliser le code HTML pour afficher le code source, cliquez ici pour afficher le code JavaScript.
  • Je ne sais pas comment il est possible de parler et de lire les commentaires (wie @Shawn in seiner Antwort zeigt), mais nous n'avons pas besoin de soutien. Der Code est également einfacher.

fiddle

1
Mark Rajcok

Je suis désolé d'ajouter ceci comme nouvelle réponse mais je n'ai pas assez de points pour l'ajouter comme commentaire Juste un léger tweak à 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'était pas nécessaire de créer ce JSON avec colonne, valeur. 

0
Ben