мой dc.js график не отображается в моем приложении flask и mongodb

ProgramBox

мой dc.js график не отображается в моем приложении flask и mongodb

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#javascript #mongodb #flask #d3.js #dc.js

#javascript #mongodb — монгодб #фляжка #d3.js #dc.js #mongodb #flask

Вопрос:

Я возвращаю массив объектов из коллекции в 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 developer tool).

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

График не загружен, и на консоли не отображается ошибка. после нескольких часов исследований я не могу понять, почему, пожалуйста, помогите мне.

Ответ №1:

Ваш код использует сочетание d3 @ 3 и d3 @ 5 , и это, вероятно, корень вашей проблемы.

D3 @ 5 изменен с обратных вызовов на обещания.

Ваш окончательный

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

будет работать с d3 @ 5 , и я предполагаю, что здесь вы видите возвращаемые правильные данные.

С другой стороны, код, который использует queue() , и ваш код инициализации диаграммы написаны для работы с d3 @ 3 (и dc @ 2).

К сожалению, если вы попытаетесь использовать d3 @ 5 с queue() , то ничего не произойдет. Как вы сказали в комментариях, вы не видите ошибки, но я подозреваю, что этот код вообще не отображается.

Я бы рекомендовал удалить queue() код и использовать рабочий d3.json код на основе обещаний.

На этом этапе вам все равно нужно будет обновить свой D3 и dc.js код, но это не так уж сложно, в основном переименовывайте d3.scale.linear в d3.scaleLinear , то же самое с порядковым номером.