时间戳

首页 > 解决方案 > dc.js 和 JQuerys 文档准备好不起作用

jquery - dc.js 和 JQuerys 文档准备好不起作用

问题描述

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

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

我创建图表并将其绑定到 div: chart。在这种情况下，它不起作用。（看不到任何图表）当我将位置从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>

标签： jquerydc.js

解决方案

问题出在这一行

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

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

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

推荐阅读