hallo zusammen,
ich kenn mich nicht so gut aus mit d3 Javascript und hatte folgende Frage:
Das Programm soll die csv Datei in einer Tabelle darstellen, aber erst nachdem man auf den Button geklickt hat.
Ich habe hier was zusammengestellt, aber klappt nicht wirklich.
da fehlt noch einiges, aber ich hab das nicht hinbekommen.
Wäre auf eine hilfreiche Antwort sehr dankbar!
Gruß
ich kenn mich nicht so gut aus mit d3 Javascript und hatte folgende Frage:
Das Programm soll die csv Datei in einer Tabelle darstellen, aber erst nachdem man auf den Button geklickt hat.
Ich habe hier was zusammengestellt, aber klappt nicht wirklich.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tabelle coilinfos</title>
<script type="text/javascript" src="js/d3.v3.min.js"></script>
<style>
/* svg styles!! */
td, th {
padding: 1px 4px;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="option">
<input name="coilinfos"
type="button"
value="Baender holen"
onclick="updateData()"/>
</div>
<script>
function updateData(){
d3.csv("data/coilinfos.csv", function(data){
// var columns = tabulate(data, ["ID_INSPEKTION", "BEZ_ANLAGE", "BEZ_KBNRRPN", "DIM_BREITE_MESS"]);
});
function tabulate(data, columns) {
var table = d3.select("#option").append("table"),
thead = table.append("thead"), //create a header for tables
tbody = table.append("tbody"); //Tabellenkörper
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; });
return table;
}
} </script>
</body>
</html>da fehlt noch einiges, aber ich hab das nicht hinbekommen.
Wäre auf eine hilfreiche Antwort sehr dankbar!Gruß
