Отображение CSV в веб-браузере после нажатия кнопки - PullRequest
Новая
       8

Отображение CSV в веб-браузере после нажатия кнопки

0 голосов
/ 15 сентября 2018

Я хочу отображать таблицу CSV в html при нажатии кнопки (в идеале, я хотел бы иметь возможность выбрать другой CSV в будущем). Я использую d3.js, но до сих пор мне не удалось даже импортировать данные. Любое предложение?

CSV, который я использую, https://gist.githubusercontent.com/noamross/e5d3e859aa0c794be10b/raw/b999fb4425b54c63cab088c0ce2c0d6ce961a563/cars.csv

и он помещается рядом с Default.htm как data.csv 

// 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>

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Я использую 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>
0 голосов
/ 15 сентября 2018 
function myTable() {
    var data = d3.text('data.csv', function(error, _data){
        d3.select("p").text(_data.join('<br/>'));
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...