个人中心
gpt4 book ai didi

javascript - d3 表超出 div 边界

转载 作者：行者123 更新时间：2023-11-27 22:50:10 25 4
gpt4 key购买 nike 

<!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 变得有响应，但我的 table 却没有。我的表格正在从 div 中打印出来。我什至选择了 d3.select("#first")，但我仍然没有得到。我是不是错过了什么。请帮助我。我被困住了。

最佳答案

您的 table 位于 <div> 内但它不限于边界。

为此，请使用 css。例如:

    #first { overflow-y: auto }
<!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>

关于javascript - d3 表超出 div 边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38121230/

25 4 0
文章推荐： Javascript 弹出窗口 - 需要创建类并将事件绑定(bind)到 document.getElementsByClassName 返回的每个元素
文章推荐： html - IE8 PNG渐变透明度问题
文章推荐： javascript - 如果在模板返回之前删除元素，则 knockout 组件将失败
文章推荐： javascript - Polymer Elements ShadowDOM 子节点 - 动态设置样式属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com