Question

<!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正在响应但不是我的桌子。我的桌子正在打印出div。我甚至选择了d3.select（“＃first”），但我仍然没有。我错过了什么。请帮帮我。我被卡住了。

Answer 1

您的桌子位于<div>内，但不限于边界。

为此，请使用css。例如：

＆＃13;

    #first { overflow-y: auto }

＆＃13;

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

＆＃13;

d3表来自div边界

1 个答案: