我正在尝试使用 D3 加载 csv 文件并使用 Bootstrap 库显示它们。该脚本工作并显示表格，但是，不应用 Bootstrap 样式。
这是我试过的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript"charset="utf-8">
d3.text("data.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("body")
.append("div").attr("class","container")
.append("table").attr("class","table table-hover")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) { return d; }).enter()
.append("td")
.text(function(d) { return d; });
});
</script>
</body>
</html>
在 Developer Tools 中检查 Elements 中的输出时，它生成的结果与此 tutorial 中显示的一致.
最佳答案
通过 styling not applied ，我假设您指的是 table-hover类(class)。为此，您需要一个带有 <tbody> 的合适表格属性:
var container = d3.select("body")
.append("div").attr("class","container")
.append("table").attr("class","table table-hover")
.append("tbody");
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//d3.text("data.csv", function(data) {
var data = "header1,header2,header3\r\na,b,c\r\nd,e,f\r\n";
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("body")
.append("div").attr("class", "container")
.append("table").attr("class", "table table-hover")
.append("tbody")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) {
return d;
}).enter()
.append("td")
.text(function(d) {
return d;
});
//});
</script>
</body>
</html>关于javascript - 如何使用 D3 加载 csv、显示表格并在 javascript 中使用 bootstrap 设置样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34003726/