Javascript 在不定义数据集的情况下，使用vis.js根据节点包含的JSON数据更改节点的图像

我正在django项目中使用Vis.js。我已经创建了一个网络，我需要能够根据节点所持有的JSON数据更改节点图像。我在这样做时遇到问题，因为需要定义整个数据集才能使用nodes.update等。我无法预定义节点，因为它基于另一个对象的返回，所以节点的数量是随机的。节点和边属性添加到Django视图中

这是我的密码：

Django snibbet：

@login_required
def project_detail(request, project_id):
    """
    Project detail, include graphical representation: modules in this project
    :param request:
    :param project_id:
    :return:
    """
    all_edges = request.GET.get('all_edges', '')
    draw_invisible_button = ''

    network_nodes = []
    network_edges = []
    tc_keys = []
    projects = Project.objects.all()
    project = get_object_or_404(Project, pk=project_id)

    testcases = project.testcaseresults_set.latest('updated').results

    user = request.user
    user.humanresource.project = project
    user.humanresource.save()
    for tc in testcases:
        data = tc['data']
        tc_keys.append(data)

    for m in project.modules:
        network_nodes.append({
            'id': m.id,
            'label': m.name,
        })
    for d, n in zip(network_nodes, tc_keys):
        d['data'] = n

    for edge in project.edges_between_modules:
        try:
            if edge.properties[EDGE_TYPES_INVISIBLE_KEY] == 'on':
                draw_invisible_button = 'true'
                if not all_edges:
                    continue
        except KeyError:
            pass

        if not check_edge_in_set(edge, network_edges):
            network_edges.append({
                'id': edge.id,
                'to': edge.to_node.module.id,
                'from': edge.from_node.module.id,
                'label': 1,
                'edge_name': edge.from_node.name + '-' + edge.to_node.name,

                'type': edge.type.name,
                'to_node': edge.to_node.name,
                'from_node': edge.from_node.name,
                'priority': edge.priority,
                'properties': edge.properties
            })

    context = {
        'projects': projects,
        'project': project,
        'all_edges': all_edges,
        'draw_invisible_button': draw_invisible_button,

        'module_new_form': ModuleForm(project_id=project.id),
        'module_import_form': UploadForm(),
        'edge_types': EdgeType.objects.all(),
        'edge_priority': Edge.PRIORITY_CHOICES,

        'network_nodes': json.dumps(network_nodes),
        'network_edges': json.dumps(network_edges),

        'edges_between_modules': network_edges
    }

    return render(request, 'graphs/project/project_detail.html', context)

模板节点和边参照snibbet：

<script>
        var nodes = {{ network_nodes|safe }};
        var edges = {{ network_edges|safe }};
</script>

这是我的绘图功能：

function draw_project_graph() {

    // create a network
    var container = document.getElementById('module_in_project');

    //var nodes = new vis.DataSet("{{ network_nodes|escapejs }}");

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'image',
            image: image_url + 'blue-infrastructure-graphics_11435264594_o.png',
            //image: image_url + 'west-ivr-graphic_11435724503_o.png',
            size: 25
        },
        edges: {
            color: '#000',
            length: 190,
            arrows: 'to',
            arrowStrikethrough: false
        },
        width: '100%',
        height: '800px'
    };

    // initialize your network!
    var network = new vis.Network(container, data, options);

    var n = JSON.stringify("{{ network_nodes|escapejs }}");
    var node = JSON.parse(n);
    console.log(node);
    $.each(JSON.parse(node), function(idx, obj){
        var details = obj.data;
        var id = obj.id;
        for (var i = 0; i < details.length; ++i){
            for(var ind in details[i]){
                if(ind === 'tcs_cannot_route'){
                    console.log(id);
                }
            }
        }
    });

    network.on('click', function(params){
        //console.log(params.nodes)
        if (!$.isEmptyObject(params.nodes)) {
            var current = '',
                tmp = window.location.href.split('/');
            for (var i = 0; i < tmp.length - 3; i++) {
                current += tmp[i] + '/'
            }
            $('#module_in_project').css('cursor', 'progress');
            window.location.href = current + 'project_module_detail/' + params.nodes;

        } else if (!$.isEmptyObject(params.edges)){
            //console.log(params.edges)
            $('a[href="#projectEdges"]').click();
            $('a[href="#project-edge-{0}"]'.format(params.edges)).click();
            $('.edges-between-modules').show();
            $('.edges-between-modules-contents').hide();
        } else {
            $('a[href="#projectModules"]').click();
        }
    })
}

致：

当“数据”：[]包含“tcs\u cannot\u route”且仅受影响的节点时，其他节点需要保持不变。任何帮助都将不胜感激

更新： 当然，这是我在周末想到的，今天早上我通过在模板中做一个小改动就解决了这个问题

发件人：

var nodes={{network_nodes | safe}}；
var-edges={{network_-edges | safe}}；

致：

var nodes=new vis.DataSet（{{network_nodes}safe}）；
var edges=新的可视数据集（{{network_edges}safe}）；

然后在我的$.each中，我可以添加节点。update（）

$.each（JSON.parse（节点）、函数（idx、obj）{
var详细信息=对象数据；
变量id=对象id；
对于（变量i=0；i

function draw_project_graph() {

    // create a network
    var container = document.getElementById('module_in_project');

    //var nodes = new vis.DataSet("{{ network_nodes|escapejs }}");

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'image',
            image: image_url + 'blue-infrastructure-graphics_11435264594_o.png',
            //image: image_url + 'west-ivr-graphic_11435724503_o.png',
            size: 25
        },
        edges: {
            color: '#000',
            length: 190,
            arrows: 'to',
            arrowStrikethrough: false
        },
        width: '100%',
        height: '800px'
    };

    // initialize your network!
    var network = new vis.Network(container, data, options);

    var n = JSON.stringify("{{ network_nodes|escapejs }}");
    var node = JSON.parse(n);
    console.log(node);
    $.each(JSON.parse(node), function(idx, obj){
        var details = obj.data;
        var id = obj.id;
        for (var i = 0; i < details.length; ++i){
            for(var ind in details[i]){
                if(ind === 'tcs_cannot_route'){
                    console.log(id);
                }
            }
        }
    });

    network.on('click', function(params){
        //console.log(params.nodes)
        if (!$.isEmptyObject(params.nodes)) {
            var current = '',
                tmp = window.location.href.split('/');
            for (var i = 0; i < tmp.length - 3; i++) {
                current += tmp[i] + '/'
            }
            $('#module_in_project').css('cursor', 'progress');
            window.location.href = current + 'project_module_detail/' + params.nodes;

        } else if (!$.isEmptyObject(params.edges)){
            //console.log(params.edges)
            $('a[href="#projectEdges"]').click();
            $('a[href="#project-edge-{0}"]'.format(params.edges)).click();
            $('.edges-between-modules').show();
            $('.edges-between-modules-contents').hide();
        } else {
            $('a[href="#projectModules"]').click();
        }
    })
}

image: image_url + 'blue-infrastructure-graphics_11435264594_o.png',

image: image_url + 'yellow-infrastructure-graphics_o.png',

<script>
        var nodes = {{ network_nodes|safe }};
        var edges = {{ network_edges|safe }};
</script>

<script>
        var nodes = new vis.DataSet({{ network_nodes|safe }});
        var edges = new vis.DataSet({{ network_edges|safe }});
</script>

$.each(JSON.parse(node), function(idx, obj){
        var details = obj.data;
        var id = obj.id;
        for (var i = 0; i < details.length; ++i){
            for(var ind in details[i]){
                if(ind === 'tcs_cannot_route'){
                    console.log(id);
                    **nodes.update([{id:id, image: image_url + 'yellow-infrastructure-graphics_o.png'}])**
                }
            }
        }
    });