如何使用D3加载csv，显示表，并在javascript中使用引导程序进行样式设置

How to use D3 to load csv, display table and style it with bootstrap in javascript

本文关键字：引导程序 设置 样式 并在 加载 D3 何使用 csv 显示 javascript      更新时间：2023-09-26

我正在尝试使用D3加载csv文件，并使用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>

当在开发工具中的元素中检查输出时，它生成的输出与本教程中提供的输出一致。

通过styling not applied，我假设您指的是table-hover类。要做到这一点，您需要一个具有<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>

相关文章：