<!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 变得有响应，但我的 table 却没有。我的表格正在从 div 中打印出来。我什至选择了 d3.select("#first")，但我仍然没有得到。我是不是错过了什么。请帮助我。我被困住了。
最佳答案
您的 table 位于 <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>关于javascript - d3 表超出 div 边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38121230/