<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Table</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#first {
height: 50%;
width: 80%;
border: 3px solid #73AD21 !important;
position: absolute !important;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
background-repeat: no-repeat;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="first" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid meet"></div>
<script type="text/javascript">
function resize() {
var w = document.getElementById('first').clientWidth;
alert(w);
var h = document.getElementById('first').clientHeight;
alert(h);
var first = $("#first"),
aspect = first.width() / first.height(),
first = first.parent();
$(window).on("resize", function() {
var targetWidth = first.width();
first.attr("width", targetWidth);
first.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
return {
w: w,
h: h
};
}
function first() {
var w = resize().w,
h = resize().h;
var data = [
["IP", "Count", "Action"],
["192.168.12.1", 20, "Allowed"],
["76.09.45.34", 40, "Blocked"],
["34.91.23.76", 80, "Allowed"],
["192.168.19.32", 16, "Blocked"],
["192.168.10.89", 50, "Blocked"],
["192.178.34.07", 18, "Allowed"],
["192.168.12.98", 30, "Blocked"],
["192.166.10.34", 12, "Blocked"],
["192.187.12.90", 97, "Allowed"],
["192.168.10.167", 21, "Blocked"]
];
var dataHeader = data.slice(1, data.length);
var titles = data[0];
var table = d3.select('#first')
.append("table")
.attr("height", h)
.attr("width", w)
.style("border-collapse", 'collapse');
var headers = table.append('thead')
.append('tr')
.selectAll('th')
.data(titles)
.enter()
.append('th')
.style("text-align", 'center')
.text(function(d) {
return d;
});
var rows = table.append('tbody')
.selectAll('tr')
.data(dataHeader)
.enter()
.append('tr');
rows.selectAll('td')
.data(function(d) {
return titles.map(function(k, i) {
return {
'value': d[i],
'name': k
};
});
})
.enter()
.append('td')
.attr('data-th', function(d) {
return d.name;
})
.text(function(d) {
return d.value;
});
}
</script>
<script type="text/javascript">
first();
</script>
</body>
</html>
我已成功制作了d3表，但我无法将表格放入名为“first”的div中。我的div正在响应但不是我的桌子。我的桌子正在打印出div。我甚至选择了d3.select（“＃first”），但我仍然没有。我错过了什么。请帮帮我。我被卡住了。
答案 0 :(得分：1)
您的桌子位于<div>内，但不限于边界。
为此，请使用css。例如：
#first { overflow-y: auto }<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Table</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#first {
height: 50%;
width: 80%;
border: 3px solid #73AD21 !important;
position: absolute !important;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
background-repeat: no-repeat;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="first" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid meet"></div>
<script type="text/javascript">
function resize() {
var w = document.getElementById('first').clientWidth;
alert(w);
var h = document.getElementById('first').clientHeight;
alert(h);
var first = $("#first"),
aspect = first.width() / first.height(),
first = first.parent();
$(window).on("resize", function() {
var targetWidth = first.width();
first.attr("width", targetWidth);
first.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
return {
w: w,
h: h
};
}
function first() {
var w = resize().w,
h = resize().h;
var data = [
["IP", "Count", "Action"],
["192.168.12.1", 20, "Allowed"],
["76.09.45.34", 40, "Blocked"],
["34.91.23.76", 80, "Allowed"],
["192.168.19.32", 16, "Blocked"],
["192.168.10.89", 50, "Blocked"],
["192.178.34.07", 18, "Allowed"],
["192.168.12.98", 30, "Blocked"],
["192.166.10.34", 12, "Blocked"],
["192.187.12.90", 97, "Allowed"],
["192.168.10.167", 21, "Blocked"]
];
var dataHeader = data.slice(1, data.length);
var titles = data[0];
var table = d3.select('#first')
.append("table")
.attr("height", h)
.attr("width", w)
.style("border-collapse", 'collapse');
var headers = table.append('thead')
.append('tr')
.selectAll('th')
.data(titles)
.enter()
.append('th')
.style("text-align", 'center')
.text(function(d) {
return d;
});
var rows = table.append('tbody')
.selectAll('tr')
.data(dataHeader)
.enter()
.append('tr');
rows.selectAll('td')
.data(function(d) {
return titles.map(function(k, i) {
return {
'value': d[i],
'name': k
};
});
})
.enter()
.append('td')
.attr('data-th', function(d) {
return d.name;
})
.text(function(d) {
return d.value;
});
}
</script>
<script type="text/javascript">
first();
</script>
</body>
</html>