Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
jet2
Заблокирован
1

arbor.js Javascript вывод html ссылки, как сделать?

10.04.2015, 10:58. Просмотров 763. Ответов 2
Метки нет (Все метки)

есть js code
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<body <?php body_class(); ?>>
 
    <head>
        <script language="javascript" type="text/javascript"  src="js/jquery.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/arbor.js" ></script>
        <script language="javascript" type="text/javascript" src="js/graphics.js" ></script>
        <script language="javascript" type="text/javascript" src="js/renderer.js" ></script>
    </head>
    <body>
Javascript
1
2
3
4
5
6
7
8
9
10
11
<script>
    <canvas id="viewport" width="800" height="600" border="1px"></canvas>
      <script language="javascript" type="text/javascript">
            var sys = arbor.ParticleSystem(1000, 400,1);
            sys.parameters({gravity:true});
            sys.renderer = Renderer("#viewport") ;
            var data = {
               nodes:{
                 animals:{'color':'#0F751C','shape':'dot','label':'<a href="http://google.com">Google</a>'},
...................
</script>
Вот вопрос, при вставке ссылки в label google.com, ссылка выводится в форматированном виде, т.е. выводится не ссылка, а весь html-код ссылки
<a href="http://google.com">Google</a>
Куда рыть?

Добавлено через 21 минуту
Вот код js-рисующий круги, в которых уже содержится label текст. renderer.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
(function(){
  
  Renderer = function(canvas){
    var canvas = $(canvas).get(0)
    var ctx = canvas.getContext("2d");
    var gfx = arbor.Graphics(canvas)
    var particleSystem = null
 
    var that = {
      init:function(system){
        particleSystem = system
        particleSystem.screenSize(canvas.width, canvas.height) 
        particleSystem.screenPadding(40)
 
        that.initMouseHandling()
      },
 
      redraw:function(){
        if (!particleSystem) return
 
        gfx.clear() // convenience Ж’: clears the whole canvas rect
 
        // draw the nodes & save their bounds for edge drawing
        var nodeBoxes = {}
        particleSystem.eachNode(function(node, pt){
          // node: {mass:#, p:{x,y}, name:"", data:{}}
          // pt:   {x:#, y:#}  node position in screen coords
 
          // determine the box size and round off the coords if we'll be 
          // drawing a text label (awful alignment jitter otherwise...)
          var label = node.data.label||""
          var w = ctx.measureText(""+label).width + 10
          if (!(""+label).match(/^[ \t]*$/)){
            pt.x = Math.floor(pt.x)
            pt.y = Math.floor(pt.y)
          }else{
            label = null
          }
 
          // draw a rectangle centered at pt
          if (node.data.color) ctx.fillStyle = node.data.color
          else ctx.fillStyle = "rgba(0,0,0,.2)"
          if (node.data.color=='none') ctx.fillStyle = "white"
 
          if (node.data.shape=='dot'){
            gfx.oval(pt.x-w/2, pt.y-w/2, w,w, {fill:ctx.fillStyle})
            nodeBoxes[node.name] = [pt.x-w/2, pt.y-w/2, w,w]
          }else{
            gfx.rect(pt.x-w/2, pt.y-10, w,20, 4, {fill:ctx.fillStyle})
            nodeBoxes[node.name] = [pt.x-w/2, pt.y-11, w, 22]
          }
 
          // draw the text
          if (label){
            ctx.font = "12px Helvetica"
            ctx.textAlign = "center"
            ctx.fillStyle = "white"
            if (node.data.color=='none') ctx.fillStyle = '#333333'
            ctx.fillText(label||"", pt.x, pt.y+4)
            ctx.fillText(label||"", pt.x, pt.y+4)
          }
        })              
 
 
        // draw the edges
        particleSystem.eachEdge(function(edge, pt1, pt2){
          // edge: {source:Node, target:Node, length:#, data:{}}
          // pt1:  {x:#, y:#}  source position in screen coords
          // pt2:  {x:#, y:#}  target position in screen coords
 
          var weight = edge.data.weight
          var color = edge.data.color
 
          if (!color || (""+color).match(/^[ \t]*$/)) color = null
 
          // find the start point
          var tail = intersect_line_box(pt1, pt2, nodeBoxes[edge.source.name])
          var head = intersect_line_box(tail, pt2, nodeBoxes[edge.target.name])
 
          ctx.save() 
            ctx.beginPath()
            ctx.lineWidth = (!isNaN(weight)) ? parseFloat(weight) : 1
            ctx.strokeStyle = (color) ? color : "#cccccc"
            ctx.fillStyle = null
 
            ctx.moveTo(tail.x, tail.y)
            ctx.lineTo(head.x, head.y)
            ctx.stroke()
          ctx.restore()
 
          // draw an arrowhead if this is a -> style edge
          if (edge.data.directed){
            ctx.save()
              // move to the head position of the edge we just drew
              var wt = !isNaN(weight) ? parseFloat(weight) : 1
              var arrowLength = 6 + wt
              var arrowWidth = 2 + wt
              ctx.fillStyle = (color) ? color : "#cccccc"
              ctx.translate(head.x, head.y);
              ctx.rotate(Math.atan2(head.y - tail.y, head.x - tail.x));
 
              // delete some of the edge that's already there (so the point isn't hidden)
              ctx.clearRect(-arrowLength/2,-wt/2, arrowLength/2,wt)
 
              // draw the chevron
              ctx.beginPath();
              ctx.moveTo(-arrowLength, arrowWidth);
              ctx.lineTo(0, 0);
              ctx.lineTo(-arrowLength, -arrowWidth);
              ctx.lineTo(-arrowLength * 0.8, -0);
              ctx.closePath();
              ctx.fill();
            ctx.restore()
          }
        })
 
 
 
      },
      initMouseHandling:function(){
        // no-nonsense drag and drop (thanks springy.js)
        selected = null;
        nearest = null;
        var dragged = null;
        var oldmass = 1
 
        // set up a handler object that will initially listen for mousedowns then
        // for moves and mouseups while dragging
        var handler = {
          clicked:function(e){
            var pos = $(canvas).offset();
            _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
            selected = nearest = dragged = particleSystem.nearest(_mouseP);
 
            if (dragged.node !== null) dragged.node.fixed = true
 
            $(canvas).bind('mousemove', handler.dragged)
            $(window).bind('mouseup', handler.dropped)
 
            return false
          },
          dragged:function(e){
            var old_nearest = nearest && nearest.node._id
            var pos = $(canvas).offset();
            var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
 
            if (!nearest) return
            if (dragged !== null && dragged.node !== null){
              var p = particleSystem.fromScreen(s)
              dragged.node.p = p
            }
 
            return false
          },
 
          dropped:function(e){
            if (dragged===null || dragged.node===undefined) return
            if (dragged.node !== null) dragged.node.fixed = false
            dragged.node.tempMass = 50
            dragged = null
            selected = null
            $(canvas).unbind('mousemove', handler.dragged)
            $(window).unbind('mouseup', handler.dropped)
            _mouseP = null
            return false
          }
        }
        $(canvas).mousedown(handler.clicked);
 
      }
 
    }
 
    // helpers for figuring out where to draw arrows (thanks springy.js)
    var intersect_line_line = function(p1, p2, p3, p4)
    {
      var denom = ((p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y));
      if (denom === 0) return false // lines are parallel
      var ua = ((p4.x - p3.x)*(p1.y - p3.y) - (p4.y - p3.y)*(p1.x - p3.x)) / denom;
      var ub = ((p2.x - p1.x)*(p1.y - p3.y) - (p2.y - p1.y)*(p1.x - p3.x)) / denom;
 
      if (ua < 0 || ua > 1 || ub < 0 || ub > 1)  return false
      return arbor.Point(p1.x + ua * (p2.x - p1.x), p1.y + ua * (p2.y - p1.y));
    }
 
    var intersect_line_box = function(p1, p2, boxTuple)
    {
      var p3 = {x:boxTuple[0], y:boxTuple[1]},
          w = boxTuple[2],
          h = boxTuple[3]
 
      var tl = {x: p3.x, y: p3.y};
      var tr = {x: p3.x + w, y: p3.y};
      var bl = {x: p3.x, y: p3.y + h};
      var br = {x: p3.x + w, y: p3.y + h};
 
      return intersect_line_line(p1, p2, tl, tr) ||
            intersect_line_line(p1, p2, tr, br) ||
            intersect_line_line(p1, p2, br, bl) ||
            intersect_line_line(p1, p2, bl, tl) ||
            false
    }
 
    return that
  }    
  
})()
js плохо знаю, ткните что править, чтобы получилось сделать ссылку на круге.

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.04.2015, 10:58
Ответы с готовыми решениями:

Как изменить все ссылки (href=.), если HTML генерируется JavaScript?
Здравствуйте! У меня есть скрипт, который берёт код HTML с другого сайта. ...

Ссылки с параметрами, Как передать параметры ссылки в javascript?
Реально ли получить значение гипперссылки? нужно передать клиенту, напр. если...

javaScript. Как достать 'href' ссылки по 'id'
Здравствуйте форумчане. Обращаюсь к вам за помощью. возникла необходимость...

Помогите сделать неполный вывод строки(JavaScript)
Есть проблема. Хочу чтобы пользователю выводило не полный текст а только первых...

Как добавить HTML JavaScript
Как добавить HTML JavaScript &lt;script type=&quot;text/javascript&quot;&gt; ...

2
artnazarov
15 / 15 / 8
Регистрация: 29.07.2014
Сообщений: 120
10.04.2015, 11:06 2
Куда рыть? Открываешь код движка на github. там черным по белому
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
   // draw the text
            if (label){
            ctx.font = "14px Helvetica"
            ctx.textAlign = "center"
            ctx.fillStyle = "white"
            if (node.data.color=='none') ctx.fillStyle = '#333333'
            ctx.fillText(label||"", pt.x, pt.y+4)
            ctx.fillText(label||"", pt.x, pt.y+4)

это вывод меток.
Прослушки событий как видишь нет, следовательно тебе нужно добавить наблюдателя для onclick, чтобы получить поведение аналогичное обычным ссылкам. У тебя же Canvas.
Ну и все, а дальше решай сам - хакать движок или погуглить грубо говоря "Arbor Js - Node Onclick" и посмотреть у кого что получилось, кто что предлагает.

P.S. А выбрал бы http://js.cytoscape.org/ с его документацией тщательной, не задавал бы таких вопросов. Там тебе и селекторы и события и т.п.
1
jet2
Заблокирован
10.04.2015, 12:27  [ТС] 3
да заменяем функцию на следующий код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
initMouseHandling:function(){
    // no-nonsense drag and drop (thanks springy.js)
    selected = null;
    nearest = null;
    var dragged = null;
    var oldmass = 1
    var mouse_is_down = false;
    var mouse_is_moving = false
 
 
    // set up a handler object that will initially listen for mousedowns then
    // for moves and mouseups while dragging
    var handler = {
      mousemove:function(e){
        if(!mouse_is_down){
          var pos = $(canvas).offset();
          _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
          nearest = particleSystem.nearest(_mouseP);
 
          if (!nearest.node) return false
          selected = (nearest.distance < 50) ? nearest : null
          if(selected && selected.node.data.link){
            dom.addClass('linkable')
          } else {
            dom.removeClass('linkable')
          }
        }
        return false
      },
      clicked:function(e){
        var pos = $(canvas).offset();
        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
        nearest = particleSystem.nearest(_mouseP);
 
        if (!nearest.node) return false
        selected = (nearest.distance < 50) ? nearest : null
 
        if (nearest && selected && nearest.node===selected.node){
          var link = selected.node.data.link
          if (link.match(/^#/)){
             $(that).trigger({type:"navigate", path:link.substr(1)})
          }else{
             window.open(link, "_blank")
          }
          return false
        }
      },
      mousedown:function(e){
        var pos = $(canvas).offset();
        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
        selected = nearest = dragged = particleSystem.nearest(_mouseP);
 
        if (dragged.node !== null) dragged.node.fixed = true
 
        mouse_is_down = true
        mouse_is_moving = false
 
        $(canvas).bind('mousemove', handler.dragged)
        $(window).bind('mouseup', handler.dropped)
 
        return false
      },
      dragged:function(e){
        var old_nearest = nearest && nearest.node._id
        var pos = $(canvas).offset();
        var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
 
        mouse_is_moving = true
 
        if (!nearest) return
        if (dragged !== null && dragged.node !== null){
          var p = particleSystem.fromScreen(s)
          dragged.node.p = p
        }
 
        return false
      },
 
      dropped:function(e){
        if (dragged===null || dragged.node===undefined) return
        if (dragged.node !== null) dragged.node.fixed = false
        dragged.node.tempMass = 50
        dragged = null
        selected = null
        $(canvas).unbind('mousemove', handler.dragged)
        $(window).unbind('mouseup', handler.dropped)
        _mouseP = null
 
        if(mouse_is_moving){
          // console.log("was_dragged")
        } else {
          handler.clicked(e)
        }
 
        mouse_is_down = false
 
        return false
      }
    }
    $(canvas).mousedown(handler.mousedown);
    $(canvas).mousemove(handler.mousemove);
 
  }
 
}
и html + js код правим на добавляем поле link с google.com
Javascript
1
2
3
4
5
6
7
8
   <canvas id="viewport" width="1024" height="800" border="1px"></canvas>
      <script language="javascript" type="text/javascript">
            var sys = arbor.ParticleSystem(1000, 400,1);
            sys.parameters({gravity:true});
            sys.renderer = Renderer("#viewport") ;
            var data = {
               nodes:{
                 animals:{'color':'#0F751C','shape':'dot','label':google','link':'http://google.com'},
Вот вопрос, как добавить еще св-во css cursor : pointer на круги?

Добавлено через 58 минут
вариант добавить св-во cursor : pointer для canvas не очень хорошее решение.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.04.2015, 12:27

Как сделать из постоянной ссылки сделать относительную?
Есть ссылка: url: 'http://my-site.ru/wp-content/themes/stratforce/'+...

Как подключить JavaScript к HTML странице и заставить работать?
Здравствуйте форумчане! Мне нужно отобразить математические...

Как узнать длину mp3-аудио - JavaScript и HTML
Всем привет! У меня проблема такая - как узнать Длительность и Битрейт...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru