按下按钮后在网络浏览器中显示 CSV答案

【问题标题】：Display CSV in webbrowser after pressing a button按下按钮后在网络浏览器中显示 CSV
【发布时间】：2019-02-20 00:49:35
【问题描述】：

我想在单击按钮时以 html 格式显示 CSV 表（理想情况下，我希望将来能够选择不同的 CSV）。我正在使用 d3.js，但到目前为止，我什至无法成功导入数据。有什么建议吗？

我使用的 CSV 是 https://gist.githubusercontent.com/noamross/e5d3e859aa0c794be10b/raw/b999fb4425b54c63cab088c0ce2c0d6ce961a563/cars.csv

并将其作为 data.csv 放置在 Default.htm 旁边

// Library used: in local.
// https://d3js.org v5.7.0 Copyright 2018 Mike Bostock
// jQuery JavaScript Library v3.3.1


function myTable() {
    var data = d3.text('data.csv', function(error, _data){
        var table = d3.csv.parseRows(_data);
    });

}

.chart div{
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: white;
}

.table div{
    font: 10px sans-serif;
    background-color: white;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: darkgreen;
}

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    color: black;
    background-color: whitesmoke;
    margin: 0px;
    padding: 0;
}



p {
    line-height: 21px;
}

h1 {
    color: white;
    background-color: rgb(111, 0, 255);
    font-size: 2.5em;
    margin: 0;
    margin-top: 0px;
    padding: 5px;
    font-style: italic;
    text-align: left;
    border-top-style: solid;
    border-top-width: 0.5em;
    border-top-color: rgb(44, 0, 58);
}

table {
    border-collapse: collapse;
    border: 2px black solid;
    font: 12px sans-serif;
}

td {
    border: 1px black solid;
    padding: 5px;
}

<!DOCTYPE html>
<html>

<head>
    <title>Training web</title>
    <script src="JQuery\jquery-3.3.1.js"></script>
    <script src="d3\d3.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Table Reader</h1>
    <p>This should show a table</p>
    <button onclick="myTable()">Click me</button>
    <div class="chart">
        
    </div>

    <div class="table">
        
    </div>

</body>

</html>

【问题讨论】：

您要创建哪种类型的 dom 元素——html 或 svg？
我想以 HTML 格式查看 CSV
好的，添加了一个将数据行附加到空表元素的示例。希望这会有所帮助...

标签： javascript html d3.js css-tables import-from-csv

【解决方案1】：

我正在使用 d3.js，但到目前为止我什至无法成功导入数据。

在 d3 v5 中，csv(url) 函数返回一个承诺，因此您需要像这样访问数据：

function loadTable(url) {
    var data = d3.csv(url)
        .then(drawTable)
        .catch(showError);
}

function drawTable(data) {
    // use the first row to get the column headers
    var keys = Object.keys(data[0]);
    
    // add the keys to the table header element
    d3.select("div.table thead")
        .selectAll("tr")
        .data([keys])
        .enter()
        .append("tr")
        .selectAll("th")
        .data(h => h)
        .enter()
        .append("th")
        .text(k => k || "model");
    
    // add the values to the table body elemeent
    d3.select("div.table tbody")
        .selectAll("tr")
        .data(data)
        .enter()
        .append("tr")
        .selectAll("td")
        .data(r => keys.map(k => r[k]))
        .enter()
        .append("td")
        .text(d => d);
}

function showError(text) {
    alert(text);
}

div.table {
    font: 10px sans-serif;
    background-color: white;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: darkgreen;
}

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    color: black;
    background-color: whitesmoke;
    margin: 0px;
    padding: 0;
}

p {
    line-height: 21px;
}

h1 {
    color: white;
    background-color: rgb(111, 0, 255);
    font-size: 2.5em;
    margin: 0;
    margin-top: 0px;
    padding: 5px;
    font-style: italic;
    text-align: left;
    border-top-style: solid;
    border-top-width: 0.5em;
    border-top-color: rgb(44, 0, 58);
}

table {
    border-collapse: collapse;
    border: 2px black solid;
    font: 12px sans-serif;
}

th {
    text-align: center;
    color: black;
    padding: 5px;
}

td {
    border: 1px black solid;
    padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<html>

<head>
    <title>Training web</title>
</head>

<body>
    <h1>Table Reader</h1>
    <p>This should show a table</p>
    <button onclick="loadTable('https://gist.githubusercontent.com/noamross/e5d3e859aa0c794be10b/raw/b999fb4425b54c63cab088c0ce2c0d6ce961a563/cars.csv')">Click me</button>

    <div class="table">
      <table>
        <thead>
          <!-- header names rendered here -->
        </thead>
        <tbody>
          <!-- csv data rows rendered here -->
        </tbody>
    </div>
</body>

</html>

【讨论】：

【解决方案2】：

function myTable() {
    var data = d3.text('data.csv', function(error, _data){
        d3.select("p").text(_data.join('<br/>'));
    });
}

【讨论】：