0
Ich versuche, d3json einige Tabellen zu erstellen, möchte ich auch etwas Inhalt zwischen den Tabellen einfügen. Diese Tabellen bleiben jedoch immer zusammen, und der Inhalt, den ich einfügen möchte, würde an einem unerwarteten Ort erscheinen.Warum sind meine zwei Divs immer nebeneinander?
Die Website stellt sich heraus, wie folgt aussehen. Idealerweise sollte das Wort "Space" zwischen den beiden Tabellen erscheinen. Ich habe das gleiche in der Schule versucht, indem ich die beiden Tabellen durch statische Daten ersetzt habe, und es war gut. Ich denke, das Problem ist dann mit dem Skript? Aber wie kann das die Erscheinung beeinflussen, wenn man bedenkt, dass sie sich in verschiedenen Divs befinden? Danke vielmals.
d3.json('data.json', function (error,data) {
function tabulate(data, columns) {
var table = d3.select(sector).append('table')
var thead = table.append('thead')
var 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; });
return table;
}
// render the table(s)
tabulate(data, ['date', 'close']); // 2 column table
});.bar_graph{
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
font: 10px sans-serif;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
#table1 table,#table2 table{
font-family: arial,16px sans-serif;
border-collapse: collapse;
width: 70%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<!--First Table-->
<div id="table1">
<script>
var sector = "#table1"
</script>
<script type='text/javascript' src='script.js'></script>
</div>
<!--Space header-->
<h1> space </h1>
<!--Second Table-->
<div id="table2">
<script>
var sector = "#table2"
</script>
<script type='text/javascript' src='script.js'></script>
</div>
</body>
</html>