我想在单击按钮时以html格式显示CSV表(理想情况下，我希望将来能够选择不同的CSV(。我正在使用 d3.js，但到目前为止，我甚至无法成功导入数据。有什么建议吗？
我正在使用的 CSV 是 https://gist.githubusercontent.com/noamross/e5d3e859aa0c794be10b/raw/b999fb4425b54c63cab088c0ce2c0d6ce961a563/cars.csv
并将其放置在"默认值"旁边.htm作为数据.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="JQueryjquery-3.3.1.js"></script>
<script src="d3d3.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>我正在使用 d3.js，但到目前为止我还没有成功 导入数据。
在 d3 v5 中，csv(url)函数返回一个 promise，因此您需要像这样访问数据：
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>function myTable() {
var data = d3.text('data.csv', function(error, _data){
d3.select("p").text(_data.join('<br/>'));
});
}