web-dev-qa-db-ja.com

CSVファイルにリンクされたテーブルを作成する

D3を使用して*.csvファイルにリンクされたテーブルを作成しようとしていますが、空のWebページしかありません。例のクリミアでも、空白のページが表示されます。
実際の例や、私が間違っていることの提案を指示または表示していただければ幸いです。

javascriptd3.jshtml-table
44
adam.888

CSVデータからHTMLテーブルを作成することを求めている場合、これはあなたが望むものです：

_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"]);
});
_
80
Shawn Allen

@Shawn_allenによって提案された回答にはバグがあります。

それを解決するには、次のコード行を変更するだけです

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

これで

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

楽しい ！

5
Fopa Léon Constantin

多くの場合、データのテーブルを定期的に更新する必要があります。テーブルにデータを入力する方法は次のとおりです。

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

ノート：

  • JavaScriptからテーブルヘッダーを生成するのではなく、HTMLにテーブルヘッダーを挿入するのが好きです。
  • テーブルの行とセルにデータを添付しませんでした（@Shawnが答えに示したように）。その必要がないためです。したがって、コードはより単純です。

fiddle

1
Mark Rajcok

これを新しい回答として追加して申し訳ありませんが、コメントとして追加するのに十分なポイントがありません。 @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を作成する必要はありませんでした。

0
Ben