我的 dc.js 图表没有显示在我的 Flask 应用程序上并且 mongodb

Question

我正在使用此函数从 MongoDB 中的集合返回一个对象数组：

```
        @app.route('/data')
        def data():
            FIELDS = {'_id': False, 'book_title': True, 'review_rating': True}
        
            projects = mongo.db.reviews.find({}, FIELDS)
            json_projects = []
            for project in projects:
                json_projects.append(project)
            json_projects = json.dumps(json_projects, default=json_util.default)
            return json_projects
    
    ```

当我启动服务器时，我可以看到数据已正确加载（这是来自 google 开发人员工具的控制台）

        (3) [{…}, {…}, {…}]
        0: {book_title: "Il guardiano degli Innocenti", review_rating: 3}
        1: {book_title: "The Lord of the Ring", review_rating: 3}
        2: {book_title: "Time of Contempt", review_rating: 4}
        length: 3
       
        

then I start making my graph in graph.js with this code:

```    
    queue()
        .defer(d3.json, "/data")
        .await(makeGraphs);
    
    function makeGraphs(error, projectsJson) {
        var ndx = crossfilter(projectsJson);
    
        show_rating_for_title(ndx);
    
        dc.renderAll();
    
    }
    
    function show_rating_for_title(ndx) {
        var dim = ndx.dimension(dc.pluck('book_title'));
        var group = dim.group();
    
        dc.barChart('#book-rating')
            .width(400)
            .height(300)
            .margins({ top: 10, right: 50, bottom: 30, left: 50 })
            .dimension(dim)
            .group(group)
            .transitionDuration(500)
            .x(d3.scale.ordinal())
            .xUnits(dc.units.ordinal)
            .elasticY(true)
            .xAxisLabel('Books title')
    }
    d3.json('/data').then(data => {
        console.log(data)
    })

```

This is the HTML:

```    
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/609714b29a.js" crossorigin="anonymous"></script>    
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.1.1/d3.min.js" integrity="sha512-5xkNvFVCctXwOszeifE8pzjyDFlHvHDCKIrhwmuSbCtTHqc7IhA6/1tTNYXE8WmYvwP5KFQegCS1QRR4poYgjg==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js" integrity="sha512-nlO6OGj6wb0uu/thpSry7qFal63hfhCLExpWxYomYB3tBznqWmKggsDHNHSLjnVaoade9tv/rErN498NSzwBnA==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.1.0/dc.min.js" integrity="sha512-lHfUFYGOLmlycQeqF3nxeqIAYf4rdpMCLyp2jbBBR0H+vszlngf7itLg0xDcS8WmO+3TYOcfkQXJXz7rVJ2xbA==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js" integrity="sha512-Pizidz0hqpLXeVq+TGqNB5KWVynUPVRTt5shjKBbQIklpnCkdmQJ3rCkzGEe713SAnzIsRt/kFTs4jWG/aPmYA==" crossorigin="anonymous"></script>
        <script src="{{ url_for('static', filename='js/graph.js') }}" type="text/javascript"></script>
        <title>Bookland</title>
    </head>
    
    <body>
    <div id="book-rating">
    
    </div>
    </body>
    ```

图表未加载，控制台上未显示任何错误。经过几个小时的研究，我无法理解为什么，请帮帮我。

Answer 1

您的代码混合使用了 d3@3 和 d3@5+，这可能是问题的根源。

D3@5 从回调更改为 Promises。

你的决赛

d3.json('/data').then(data => {
    console.log(data)
})

将与 d3@5+ 一起工作，我认为这是您看到返回的正确数据的地方。

另一方面，使用 queue() 的代码和您的图表初始化代码是为与 d3@3（和 dc@2）一起工作而编写的。

不幸的是，如果您尝试将 d3@5 与 queue() 一起使用，那么 什么都不会发生 。正如您在评论中所说，您没有看到错误，但我怀疑这段代码根本没有被命中。

我建议删除 queue() 代码并使用有效的 Promise-based d3.json 代码。

那时你仍然需要升级你的 D3 和 dc.js 代码，但这并不难，主要是将 d3.scale.linear 重命名为 d3.scaleLinear，与序数相同.

我的 dc.js 图表没有显示在我的 Flask 应用程序上并且 mongodb

my dc.js graph is not display on my flask application and mongodb

javascript

mongodb

flask

d3.js

dc.js