D3.js 下拉列表的设计因元素太多而崩溃_D3.js_Jquery Plugins_Html Select

D3.js 下拉列表的设计因元素太多而崩溃

d3.js jquery-plugins

D3.js 下拉列表的设计因元素太多而崩溃,d3.js,jquery-plugins,html-select,D3.js,Jquery Plugins,Html Select,我下载了一个JQuery插件，用于搜索下拉列表。这是你的电话号码我使用D3.js来填充列表。它适用于少数元素，但当我想加载1200左右的所有元素时，设计崩溃，列表显示在顶部，因此我看不到项目，也没有滚动条下面是加载整个元素时的情况：在这里，我们可以从浏览器中的开发人员工具中看到数据已正确加载：控制台显示以下冲突：以下是我的D3.js代码： d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) { if (err

我下载了一个JQuery插件，用于搜索下拉列表。这是你的电话号码

我使用D3.js来填充列表。它适用于少数元素，但当我想加载1200左右的所有元素时，设计崩溃，列表显示在顶部，因此我看不到项目，也没有滚动条

下面是加载整个元素时的情况：

在这里，我们可以从浏览器中的开发人员工具中看到数据已正确加载：

控制台显示以下冲突：

以下是我的D3.js代码：

d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) {
    if (error) throw error;

    d3.select("#my-select").selectAll(".option")
        .data(d3.map(Symbolsdata, function (d) { return d.CurrSymbol; }).keys())
        .enter().append("option")
        .text(function (d) { return d; })
        .attr("value", function (d) { return d; });
});

Html脚本：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">


    <title> Crypto Trading Project</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/sol.css">


  </head>

  <body>

    <header>
      <div class="collapse bg-light" id="navbarHeader">
        <div class="container">
          <div class="row">
            <div class="col-sm-6 py-4">
                  <select id="my-select" name="Cryptos"  multiple="multiple"></select>
            </div>
            <div class="col-sm-6 py-4">
               From <input type="text" class="mt10px input" id="J-demo-04" value=""> To <input type="text" class="mt10px input" id="J-demo-05" value="">
                 &nbsp;&nbsp;&nbsp;<button type="button" id="applyFilterButton" class="btn btn-dark">Apply</button>
            </div>
            <div class="col-sm-3 py-4">
            </div>
          </div>
        </div>
      </div>
      <div class="navbar navbar-dark bg-dark box-shadow">
        <div class="container d-flex justify-content-between">
        <a href="#">Cryptos VA</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
    </header>


    <main role="main">

    </main>

    <script src="js/jquery-3.3.1.min.js"></script>
       <script src="js/date-time-picker.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/sol.js"></script>


    <script type="text/javascript" src="js/d3.js"></script>
    <script type="text/javascript" src="js/loadsol.js"></script>

    <script type="text/javascript">

    $(function() {
        // initialize sol
      $('#my-select').searchableOptionList({
        showSelectAll: true
      });

     //dateTimePicker

       $('#J-demo-04').dateTimePicker({
          limitMax: $('#J-demo-05')
      });

      $('#J-demo-05').dateTimePicker({
          limitMin: $('#J-demo-04')
      });

    });
    </script>
  </body>
</html>

我怎么能让它工作呢？

我终于能弄明白了。这个想法就是简单地固定活动容器的高度并添加一个滚动条。因此，我将sol.css文件添加到.sol-container.sol-active.sol selection container类中这两个css属性：

height: 300px;
overflow-y: auto;

我想你的问题是如何使它工作？也许一开始不要使用jquery插件，它似乎不会处理太多的节点，而是使用HTML5数据列表属性：是的，我正想让它工作。好吧，我需要有这个插件的搜索功能和多重选择。它有项目，但列表显示在顶部向上，并且不显示滚动条。我是web开发新手，因此我无法调整插件的默认值或覆盖它：源脚本sol.js中还有超时功能。我玩了一点，我再也没有收到违规信息了。然而，它仍然不起作用