Обновление данных в дерево JavaScript из каналов Django - PullRequest
Новая
       8

Обновление данных в дерево JavaScript из каналов Django

0 голосов
/ 11 ноября 2018

Я пробую библиотеку Treant.js для создания древовидных структур. Я начал с этого примера: https://github.com/fperucic/treant-js/tree/master/examples/basic-example,, и если я вручную объявляю значение для диаграммы, он работает без проблем.

Теперь я хочу загрузить его данными, полученными с канала Django, но, похоже, не могу найти решение.

Это тег из html, в который должна быть загружена древовидная диаграмма, с файлами .js, загруженными после нее, как в примере по ссылке выше ('load static' вызывается в начале файла и работает для всех остальных статических файлов): 

<div class="chart" id="basic-example"></div>

<script src="{% static 'path.../raphael.js'%}"></script>
<script src="{% static 'path.../Treant.js'%}"></script>

Я попытался изменить значение переменной 'content' следующим образом: 

content = {}

var chart_config = {
    chart: {
        container: "#basic-example",

        connectors: {
            type: 'step'
        },
        node: {
            HTMLclass: 'nodeExample1'
        }
    },
    nodeStructure: content

};

new Treant( chart_config );

someSocket.onmessage = function(e) {
    let event_data = JSON.parse(e.data);
    content = event_data.data;

};

Я проверил, правильно ли передается «event_data.data» по каналу, является ли это действительным объектом JS, и все ли это работает. Я предполагаю, что это довольно новый вопрос, но я был бы признателен за любую помощь:)

1 Ответ

0 голосов
/ 11 ноября 2018

Я не пытался воспроизвести проблему (извините за это), но, похоже, вам нужно определить свой контент перед вызовом нового Treant ().

Итак, я бы попробовал это: 

someSocket.onmessage = function(e) {
  let event_data = JSON.parse(e.data);

  var chart_config = {
    chart: {
        container: "#basic-example",

        connectors: {
            type: 'step'
        },
        node: {
            HTMLclass: 'nodeExample1'
        }
    },
    nodeStructure: event_data.data
  };
  
  new Treant( chart_config );
};
...