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

我在我的网页上添加了DC.JS的一些图表。对于我所有其他内容，我都使用了此代码：

  <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.J的其他图表没有任何问题。

我的错误是什么？

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

问题在此行

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

您在元素实际出现在HTML中之前调用它。因此，您也应该将此行移至$(document).ready(function () {})包装器，然后在已经构建文档时查找元素。

请注意，Flightnumbers变量将不再可以在全球范围内访问。如果出于任何原因需要，则可以将其直接设置为使用window.Flightnumbers =的全局名称空间。但是，您应该避免使用全局名称空间，尽管这里是一个偏僻的命名空间。

相关内容

最新更新

热门标签：