1
<!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表我已經成功地取得了D3表，但我不能把表到我的div被稱爲「第一」。我的div得到響應，但不是我的桌子。我的表格正在打印出div。我甚至選擇了d3.select（「＃first」），但仍然沒有得到。我錯過了什麼。請幫助我。我被卡住了。
好我得到了它，我們可以把滾動條在此表中。但仍然沒有得到迴應。 div – Rach
同樣，這一切都需要使用CSS進行排序。 d3部分工作正常。 –
好吧，我明白了，我們可以在此表中放置一個滾動條。但仍然沒有得到迴應。 div根據我的屏幕大小得到響應，但表格寬度和高度保持不變。它是如何的？請任何建議。 – Rach