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>