0
我想用d3json創建一些表格，我也想在表格之間插入一些內容。但是，這些表格總是粘在一起，我打算在它們之間插入的內容會出現在意想不到的地方。爲什麼我的兩個div總是彼此相鄰？
該網站原來是這個樣子。理想情況下，兩個表格之間應該出現「空格」一詞。我在w3school中嘗試了同樣的事情，用一些靜態數據替換了兩個表，這很好。我想這個問題是與腳本呢？但考慮到它們在不同的div中，這怎麼會影響外觀呢？非常感謝。
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>