Added 32x32 icons to nodes (place holder images for now).
Made 'layering' layout choice a config option. Switched sample data to use full length dpids.
Showing
1 changed file
with
34 additions
and
15 deletions
... | @@ -10,11 +10,16 @@ | ... | @@ -10,11 +10,16 @@ |
10 | var api = onos.api; | 10 | var api = onos.api; |
11 | 11 | ||
12 | var config = { | 12 | var config = { |
13 | + layering: false, | ||
13 | jsonUrl: 'network.json', | 14 | jsonUrl: 'network.json', |
15 | + iconUrl: { | ||
16 | + pkt: 'pkt.png', | ||
17 | + opt: 'opt.png' | ||
18 | + }, | ||
14 | mastHeight: 32, | 19 | mastHeight: 32, |
15 | force: { | 20 | force: { |
16 | - linkDistance: 150, | 21 | + linkDistance: 240, |
17 | - linkStrength: 0.9, | 22 | + linkStrength: 0.8, |
18 | charge: -400, | 23 | charge: -400, |
19 | ticksWithoutCollisions: 50, | 24 | ticksWithoutCollisions: 50, |
20 | marginLR: 20, | 25 | marginLR: 20, |
... | @@ -286,16 +291,24 @@ | ... | @@ -286,16 +291,24 @@ |
286 | .attr('ry', 5) | 291 | .attr('ry', 5) |
287 | // .attr('stroke', function(d) { return '#000'}) | 292 | // .attr('stroke', function(d) { return '#000'}) |
288 | // .attr('fill', function(d) { return '#ddf'}) | 293 | // .attr('fill', function(d) { return '#ddf'}) |
289 | - .attr('width', 60) | 294 | + .attr('width', 126) |
290 | .attr('height', 24); | 295 | .attr('height', 24); |
291 | 296 | ||
292 | network.node.each(function(d) { | 297 | network.node.each(function(d) { |
293 | var node = d3.select(this), | 298 | var node = d3.select(this), |
294 | - rect = node.select('rect'); | 299 | + rect = node.select('rect'), |
295 | - var text = node.append('text') | 300 | + img = node.append('svg:image') |
296 | - .text(d.id) | 301 | + .attr('x', -9) |
297 | - .attr('dx', '1em') | 302 | + .attr('y', -12) |
298 | - .attr('dy', '2.1em'); | 303 | + .attr('width', 32) |
304 | + .attr('height', 32) | ||
305 | + .attr('xlink:href', iconUrl(d)), | ||
306 | + text = node.append('text') | ||
307 | + .text(d.id) | ||
308 | + .attr('dx', '1.0em') | ||
309 | + .attr('dy', '1.8em'), | ||
310 | + dummy; | ||
311 | + | ||
299 | }); | 312 | }); |
300 | 313 | ||
301 | // this function is scheduled to happen soon after the given thread ends | 314 | // this function is scheduled to happen soon after the given thread ends |
... | @@ -322,6 +335,10 @@ | ... | @@ -322,6 +335,10 @@ |
322 | 335 | ||
323 | } | 336 | } |
324 | 337 | ||
338 | + function iconUrl(d) { | ||
339 | + return config.iconUrl[d.type]; | ||
340 | + } | ||
341 | + | ||
325 | function translate(x, y) { | 342 | function translate(x, y) { |
326 | return 'translate(' + x + ',' + y + ')'; | 343 | return 'translate(' + x + ',' + y + ')'; |
327 | } | 344 | } |
... | @@ -330,13 +347,15 @@ | ... | @@ -330,13 +347,15 @@ |
330 | function tick(e) { | 347 | function tick(e) { |
331 | network.numTicks++; | 348 | network.numTicks++; |
332 | 349 | ||
333 | - // adjust the y-coord of each node, based on y-pos constraints | 350 | + if (config.layering) { |
334 | -// network.nodes.forEach(function (n) { | 351 | + // adjust the y-coord of each node, based on y-pos constraints |
335 | -// var z = e.alpha * n.constraint.weight; | 352 | + network.nodes.forEach(function (n) { |
336 | -// if (!isNaN(n.constraint.y)) { | 353 | + var z = e.alpha * n.constraint.weight; |
337 | -// n.y = (n.constraint.y * z + n.y * (1 - z)); | 354 | + if (!isNaN(n.constraint.y)) { |
338 | -// } | 355 | + n.y = (n.constraint.y * z + n.y * (1 - z)); |
339 | -// }); | 356 | + } |
357 | + }); | ||
358 | + } | ||
340 | 359 | ||
341 | network.link | 360 | network.link |
342 | .attr('x1', function(d) { | 361 | .attr('x1', function(d) { | ... | ... |
-
Please register or login to post a comment