从 Django 通道将数据更新到 JavaScript 树

Question

我正在尝试 Treant.js 用于制作树结构的库。我从这个例子开始：https://github.com/fperucic/treant-js/tree/master/examples/basic-example，如果我手动声明图表的值，它可以正常工作。

现在我想用从 Django 通道接收的数据加载它，但似乎找不到解决方案。

这是 html 中的树形图应加载到的标记，在它之后加载 .js 文件，如上面 link 中的示例（'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 对象，一切正常。我认为这是一个新手问题，但我将不胜感激 :)

Answer 1

我没有尝试重现该问题（对此感到抱歉），但您似乎必须在调用 new 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 );
};

从 Django 通道将数据更新到 JavaScript 树

Update data into JavaScript tree from Django channels

javascript

django-channels