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文档就绪无法正常工作

1 个答案: