dc.js 并且 JQuerys 文档就绪不起作用

Question

我在我的网页上添加了一些带有 dc.js 的图表。对于我所有的其他东西，我使用 jQuery.ready 和这个代码：

  <html>
  <head> 
  ....
  <script>
 $(document).ready(function () {
   //Javascriptcode
  };
 </script>
 </head>
 </body>
  <div id="chart"></div>
  ....
 </body>
 </html>

我创建图表并将其绑定到 div：图表。在这种情况下，它起作用了。（看不到任何图表）当我将位置从 div 更改为 head 时，它有效..？我已经尝试过： document.addEventListener("DOMContentLoaded", function(event) { js-code..});

但我遇到了同样的问题。（无错误消息）。我使用 JQuery，因为我用 c3.js 创建了一些其他图表没有任何问题..

我的错误是什么？

<html>
<head>
    <meta charset="utf-8">
   <link href="https://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <script src=" https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
    <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
const socket = io.connect('localhost:3000');

        var Flightnumbers = dc.rowChart("#chart1");
       
        socket.emit('Flightnumbers');

        $(document).ready(function () {
            // console.log("ready!");
            dc.config.defaultColors(d3.schemeSet1);
            socket.on('Flightnumbers-b', function (data) {
                console.log(data);
               
                var tmp = crossfilter(data);
               

                var FlightNumbersDim = tmp.dimension(function (d) {
                    return d["Target"];
                });              

                var FlightNumbersGroup = FlightNumbersDim.group();                           
                dc.renderAll();

            });
       });
  
    </script>
    </head>
    <body>
    <div id="chart1"></div>
    </body>
    </html>

Answer 1

问题出在这一行

var Flightnumbers = dc.rowChart("#chart1");

您在元素实际出现在 HTML 之前调用它。所以你也应该将这一行移动到 $(document).ready(function () {}) 包装器，然后它会在已经构建文档时查找元素。

请注意，Flightnumbers 变量将无法再全局访问。如果出于任何原因需要它，您可以使用 window.Flightnumbers = 将其直接设置为全局命名空间。但是，您应该避免使用全局命名空间，尽管它在这里是一个题外话。

dc.js 并且 JQuerys 文档就绪不起作用

dc.js and JQuerys document ready doesn't work

jquery

dc.js