score:3

Accepted answer

By styling not applied, I assume you are referring to the table-hover class. For that to work you need a proper table with a <tbody> attribute:

var container = d3.select("body")
  .append("div").attr("class","container")
  .append("table").attr("class","table table-hover")
  .append("tbody");

Full code:

<!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>


Related Query

More Query from same tag