Отображение очень большого графика с использованием JIT - PullRequest
Новая
       22

Отображение очень большого графика с использованием JIT

2 голосов
/ 20 апреля 2011

Я хочу показать однонаправленный график пользователю на веб-странице. В настоящее время я использую JavaScript InfoVis Toolkit (JIT) в качестве библиотеки визуализации.

Проблема в том, что граф имеет много узлов и ребер, и браузер не может справиться со всем этим и замедляется. Вот скриншот части графика:

Screenshot of the graph with many nodes

Я думаю, что проблема будет решена, если график будет показан частично. Поэтому, когда пользователь нажимает на узел, этот узел и узлы вокруг него должны быть расширены (показано), а некоторые удаленные узлы должны быть свернуты (скрыты), чтобы предотвратить проблемы с производительностью.

Основываясь на этой идее, я написал простой код, который расширяет узел и помещает его в центр, когда пользователь нажимает на него и сворачивает предыдущий центрированный узел. Это не очень эффективный и мудрый способ отображения узлов, в любом случае он не работает. Он просто сворачивает все узлы и не может развернуть текущий выбранный узел.

Вот код: 

onClick: function(node,eventInfo,e) {
    if(node==false) 
    {
        return;
    }

    if(rgraph.previousexpand!=false)
    {
        if(rgraph.previousexpand.id!=node.id)
        {
            rgraph.op.contract(rgraph.previousexpand, {  
                type: 'animate',  
                duration: 3000,  
                hideLabels: true,  
                transition: $jit.Trans.Quart.easeOut  
            });                 
        }
    }

    rgraph.previousexpand = node;
    rgraph.op.expand(rgraph.previousexpand, {  
       type: 'animate',  
       duration: 3000,  
       hideLabels: true,  
       transition: $jit.Trans.Quart.easeOut  
    }); 

    rgraph.onClick(node.id);
}

И при инициализации: 

rgraph.previousexpand=false;

Во-первых, знаете ли вы лучший способ показать очень большой график? Есть ли какое-либо другое решение в JIT или, возможно, в другой библиотеке, которая отображает график таким образом?

Во-вторых, что мне не хватает в коде?

...