Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 31.03.2017, 09:15   #1
Olejik
Форумчанин
 
Регистрация: 02.06.2009
Сообщений: 218
По умолчанию Граф - скрытие и отображение вершин

Добрый день!
Использую библиотеку с http://arborjs.org/.
На данный момент есть задача скрывать и заново отображать вершины у графов, как сделано на главной странице источника.
Код:
(function($){
    var Renderer = function(canvas)
    {
        var i = 0;
        var canvas = $(canvas).get(0);
        var ctx = canvas.getContext("2d");
        var particleSystem;
...
switchSection:function(newSection){
            //var parent = particleSystem.getEdgesFrom(newSection)[0]//.source
            //console.log(parent);
            //var parent = particleSystem.getEdgesTo(newSection)[0].source
            //console.log("parent");
            //console.log(parent);
            //var children = $.map(particleSystem.getEdgesFrom(parent.name), function(edge){
            //  return edge.target
            //})
            //console.log("children");
            //console.log(children);
            current = particleSystem.getNode(newSection);
            particleSystem.tweenNode(current, .5, {alpha:0});
            current.p.x = current.p.x + .05*Math.random() - .025
            current.p.y = current.p.y + .05*Math.random() - .025
            current.tempMass = .001
            //current.tempMass = .001;
            //console.log(current);
            //particleSystem.pruneNode(current);
            
            /*particleSystem.eachNode(function(node){
                console.log(node.name);
                particleSystem.tweenNode(node, .5, {alpha:1})
                //node.p.x = parent.p.x + .05*Math.random() - .025
                //node.p.y = parent.p.y + .05*Math.random() - .025
                //node.tempMass = .001
            
              if (node.data.shape=='dot') return // skip all but leafnodes
 
              var nowVisible = ($.inArray(node, children)>=0)
              var newAlpha = (nowVisible) ? 1 : 0
              var dt = (nowVisible) ? .5 : .5
              particleSystem.tweenNode(node, dt, {alpha:newAlpha})
 
              if (newAlpha==1){
                node.p.x = parent.p.x + .05*Math.random() - .025
                node.p.y = parent.p.y + .05*Math.random() - .025
                node.tempMass = .001
              }
            })*/
          },
        
            initMouseHandling:function(){
                //события с мышью
                var dragged = null;         //вершина которую перемещают
                var handler = {
                    moved:function(e) {     //Перетаскиваем мышку по вершинам
                        var pos = $(canvas).offset();//Узнаем позицию клика курсором
                        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
                        nearest = particleSystem.nearest(_mouseP);
                        if (nearest===null) return false
                        if (!nearest.node) return false
                        _section = nearest.node.name
                        selected = (nearest.distance < 50) ? nearest : null
                        //selected.hide();
                        //$(this).hide()
                        that.switchSection(_section)
                    },
                    clicked:function(e){    //нажали
                        var pos = $(canvas).offset();   //получаем позицию canvas
                        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top); //и позицию нажатия кнопки относительно canvas
                        dragged = particleSystem.nearest(_mouseP);  //определяем ближайшую вершину к нажатию
                        //console.log(dragged.node.name+"="+dragged.distance);
                        dragged = (dragged.distance < 150) ? dragged : null //Проверяем расстояние от курсора до ближайшей вершины
                                                                            //если больше значения, значит не выделяем ни чего
                                                                            //Проблема в том, что значения привязываются к центру вершины, а не к самой вершине
                        
                        if(!dragged)//Если выделенной вершины нет, то очищаем поле информации
                        {
                            $('#status .name').html("")
                            $('#status .type').text("")
                            return false;
                        }
                        if (dragged && dragged.node !== null){
                            dragged.node.fixed = true;  //фиксируем её
                        }
                        $('#status .name').html("<a href='"+dragged.node.data.link+"'>"+dragged.node.name+"</a>")
                        $('#status .type').text(dragged.node.data.def+" ("+dragged.node.data.type+")")
                        $(canvas).bind('mousemove', handler.dragged);   //слушаем события перемещения мыши
                        $(window).bind('mouseup', handler.dropped);     //и отпускания кнопки
                        that.redraw(); //add
                        return false;
                        
                    },
                    dragged:function(e){    //перетаскиваем вершину
                        var pos = $(canvas).offset();
                        var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);
    
                        if (dragged && dragged.node !== null){
                            var p = particleSystem.fromScreen(s);
                            dragged.node.p = p; //тянем вершину за нажатой мышью
                        }
    
                        return false;
                    },
                    dropped:function(e){    //отпустили
                        if (dragged===null || dragged.node===undefined)
                        {
                            return; //если не перемещали, то уходим
                            //console.log("null");
                        }
                        if (dragged.node !== null) dragged.node.fixed = false;  //если перемещали - отпускаем
                        dragged.node.tempMass = 1000 //add
                        dragged = null; //очищаем
                        $(canvas).unbind('mousemove', handler.dragged); //перестаём слушать события
                        $(window).unbind('mouseup', handler.dropped);
                        _mouseP = null;
                        return false;
                    }
                }
                
                $(canvas).mousedown(handler.clicked);// слушаем события нажатия мыши
                $(canvas).mousemove(handler.moved);// слушаем события перетаскивания мыши по canvas
            },
      
        }
        return that;
    }
Пытаюсь осуществить данную задачу в moved.
Во вложении скрипт, который я выцепил с сайта-источника.
В данной бибилотеке есть pruneEdge, но он удаляет вершину из системы, а мне необходимо ее скрыть.
Заранее спасибо за помощь
Вложения
Тип файла: 7z site.7z (3.4 Кб, 6 просмотров)
Olejik вне форума Ответить с цитированием
Старый 31.03.2017, 11:11   #2
Olejik
Форумчанин
 
Регистрация: 02.06.2009
Сообщений: 218
По умолчанию

Решил этот вопрос через удаление и добавление вершин, все это сделал в событии clicked.
Код:
...
remove_nodes=new Array();
...
clicked:function(e){	//нажали
						var pos = $(canvas).offset();	//получаем позицию canvas
						_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top); //и позицию нажатия кнопки относительно canvas
						dragged = particleSystem.nearest(_mouseP);	//определяем ближайшую вершину к нажатию
						//console.log(dragged.node.name+"="+dragged.distance);
						dragged = (dragged.distance < 150) ? dragged : null //Проверяем расстояние от курсора до ближайшей вершины
																		    //если больше значения, значит не выделяем ни чего
																			//Проблема в том, что значения привязываются к центру вершины, а не к самой вершине
						
						if(!dragged)//Если выделенной вершины нет, то очищаем поле информации
						{
							$('#status .name').html("")
							$('#status .type').text("")
							//Добавляем удаленную вершину в систему
							//Обход по удаленным вершинам
							jQuery.each(remove_nodes, function(i, val) {
								//Восстанавливаем удаленную вершину
								particleSystem.addNode(val[0].name,val[0].data);
								//Обход по удаленным связям From
								jQuery.each(val[1], function(j,edgesFrom) {
									particleSystem.addEdge(particleSystem.getNode(edgesFrom.source.name),particleSystem.getNode(edgesFrom.target.name),particleSystem.getNode(edgesFrom.data))
								});
								//Обход по удаленным связям To
								jQuery.each(val[2], function(j,edgesTo) {
									particleSystem.addEdge(particleSystem.getNode(edgesTo.source.name),particleSystem.getNode(edgesTo.target.name),particleSystem.getNode(edgesTo.data))
								});
							});
							remove_nodes= new Array();
							return false;
						}
						if (dragged && dragged.node !== null){
							dragged.node.fixed = true;	//фиксируем её
						}
						remove_nodes[remove_nodes.length]=new Array(dragged.node,sys.getEdgesFrom(dragged.node.name),sys.getEdgesTo(dragged.node.name));
						console.log(remove_nodes);
						particleSystem.pruneNode(dragged.node);
						$('#status .name').html("<a href='"+dragged.node.data.link+"'>"+dragged.node.name+"</a>")
						$('#status .type').text(dragged.node.data.def+" ("+dragged.node.data.type+")")
						$(canvas).bind('mousemove', handler.dragged);	//слушаем события перемещения мыши
						$(window).bind('mouseup', handler.dropped);		//и отпускания кнопки
						that.redraw(); //add
						return false;
						
					},
...
как реализовано: при клике на вершину данные самой вершины, входящие и исходящие связи заносятся в массив remove_nodes.
Код:
remove_nodes[remove_nodes.length]=new Array(dragged.node,sys.getEdgesFrom(dragged.node.name),sys.getEdgesTo(dragged.node.name));
Как только мы кликаем не на вершину
Код:
if(!dragged)//Если выделенной вершины нет, то очищаем поле информации
Мы запускаем цикл по каждой вершине и ее связям, добавляя в систему для начала саму вершину, а потом ее связи.
Код:
//Добавляем удаленную вершину в систему
							//Обход по удаленным вершинам
							jQuery.each(remove_nodes, function(i, val) {
								//Восстанавливаем удаленную вершину
								particleSystem.addNode(val[0].name,val[0].data);
								//Обход по удаленным связям From
								jQuery.each(val[1], function(j,edgesFrom) {
									particleSystem.addEdge(particleSystem.getNode(edgesFrom.source.name),particleSystem.getNode(edgesFrom.target.name),particleSystem.getNode(edgesFrom.data))
								});
								//Обход по удаленным связям To
								jQuery.each(val[2], function(j,edgesTo) {
									particleSystem.addEdge(particleSystem.getNode(edgesTo.source.name),particleSystem.getNode(edgesTo.target.name),particleSystem.getNode(edgesTo.data))
								});
							});
После того, как все вершины и связи восстановлены - мы очищаем массив
Код:
remove_nodes= new Array();

Последний раз редактировалось Olejik; 31.03.2017 в 11:12. Причина: Недописал описание
Olejik вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Начертите неориентированный связный граф, со-держащий пять вершин и семь ребер.В текстовом файле подготовьте матрицу смежн Nika1997 Общие вопросы Delphi 0 06.03.2015 19:17
Jquery, скрытие-отображение блока fs444 JavaScript, Ajax 1 02.12.2013 00:32
Определить степени вершин графа и если граф однородный - вывести степень однородности(любой язык) serg0 Помощь студентам 0 18.02.2013 23:31
Автоматическое скрытие/отображение столбцов по условию staniiislav Microsoft Office Excel 2 27.07.2011 16:28
граф, перебор вершин PianeR Помощь студентам 0 02.12.2010 12:00