From e04e01ff95a4723cb28efaf7667d14605998eaf3 Mon Sep 17 00:00:00 2001 From: Lakshman Mukkamalla Date: Fri, 6 Jun 2014 10:55:42 -0700 Subject: [PATCH] Cleaned up topology js and adding zoom capability with static topo data Change-Id: Ie0b70075a77ddae98000d920b668d583860dae40 Signed-off-by: Lakshman Mukkamalla --- src/app/topology/topology.js | 8 +-- src/common/general/topology.js | 124 ++++++++++++++------------------- 2 files changed, 58 insertions(+), 74 deletions(-) diff --git a/src/app/topology/topology.js b/src/app/topology/topology.js index 53a0a36c..a2b39f42 100644 --- a/src/app/topology/topology.js +++ b/src/app/topology/topology.js @@ -14,10 +14,10 @@ angular.module('console.topology', []) }; $scope.createTopology(); - /*$scope.topologyData = { - directed: false, multigraph: false, graph: [], nodes: [{"id": "one"}, {"id": "two"}, {"id": "three"}], - links: [{"source": 0, "target": 1}, {"source": 0, "target": 2}] - }*/ + $scope.topologyData = { + directed: false, multigraph: false, graph: [], nodes: [{"id": "openflow:1"}, {"id": "openflow:3"}, {"id": "openflow:2"}, {"id": "openflow:5"}, {"id": "openflow:4"}, {"id": "openflow:7"}, {"id": "openflow:6"}], + links: [{"source": 0, "target": 2}, {"source": 0, "target": 3}, {"source": 1, "target": 2}, {"source": 2, "target": 4}, {"source": 3, "target": 5}, {"source": 3, "target": 6}] + }; }] }); diff --git a/src/common/general/topology.js b/src/common/general/topology.js index b6aecad8..4352dcea 100644 --- a/src/common/general/topology.js +++ b/src/common/general/topology.js @@ -18,91 +18,75 @@ angular.module('common.topology', []) topologyData: '=' }, link: function($scope, iElm, iAttrs, controller) { - var svg = d3.select(iElm[0]).append('svg') + + //Creates the parent svg element + var svg = d3.select(iElm[0]).append('svg') //.attr("pointer-events", "all") .attr('width', width) - .attr('height', height); + .attr('height', height) + .attr("viewBox", "0 0 " + width + " " + height) + .attr("preserveAspectRatio", "xMidYMid meet") + .attr("pointer-events", "all") + .call(d3.behavior.zoom().on("zoom", redraw)); + + //Creates a container g element for the svg, all the visualization elements are under vis + var vis = svg.append('svg:g'); - $scope.$watch('topologyData', function (newVal, dluxVal) { - svg.selectAll('*').remove(); + function redraw() { + vis.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); + } + + $scope.$watch('topologyData', function (newVal, dluxVal) { + vis.selectAll('*').remove(); if(!newVal) { return; } var topo = d3.layout.force() - .charge(-300) - .distance(100) - .nodes(newVal.nodes) - .links(newVal.links) - .size([width, height]) - .start(); - - var link = svg.selectAll(".link") - .data(newVal.links) - .enter().append("line") - .attr("class", "link"); - - /*ar node = svg.append("svg:g").selectAll("circle.node") - .data(newVal.nodes) - .enter().append("svg:circle") - .attr("class", "node") - .attr("r", 15) - .style("fill", function(d) { return fill(d.group); }) - .attr("cx", function(d) { return d.x; }) - .attr("cy", function(d) { return d.y; }) - .call(topo.drag);*/ - - var node = svg - .selectAll('.node') - .data(newVal.nodes) - .enter() - .append('g') - .attr("class", "node") - .call(topo.drag); - - node - .append("image") - .attr("xlink:href", "/assets/images/Device_switch_3062_unknown_64.png") - .attr("x", -25) - .attr("y", -25) - .attr("width", 50) - .attr("height", 50); - - node.append("text") - .attr("dx", -55) - .attr("dy", "-10") - .text(function(d) { -console.log(d); - return d.id; }); - //node.append("title") + .charge(-300) + .distance(150) + .nodes(newVal.nodes) + .links(newVal.links) + .size([width, height]) + .start(); - /*var text = svg.append("svg:g").selectAll("g") - .data(topo.nodes()) - .enter().append("svg:g"); + var link = vis.selectAll(".link") + .data(newVal.links) + .enter().append("line") + .attr("class", "link"); - text.append("svg:text") - .text(function(d) { return d.id; }) - .attr('x', -50) - .attr('y', 25); - //.attr("x", function(d) { return d.x; }) - //.attr("y", function(d) { return d.y; }) + var node = vis + .selectAll('.node') + .data(newVal.nodes) + .enter() + .append('g') + .attr("class", "node") + .call(topo.drag); - svg.style("opacity", 1e-6) - .transition() - .duration(1000) - .style("opacity", 2);*/ + node.append("image") + .attr("xlink:href", "/assets/images/Device_switch_3062_unknown_64.png") + .attr("x", -25) + .attr("y", -25) + .attr("width", 50) + .attr("height", 50); - topo.on("tick", function() { - link.attr("x1", function(d) { return d.source.x; }) - .attr("y1", function(d) { return d.source.y; }) - .attr("x2", function(d) { return d.target.x; }) - .attr("y2", function(d) { return d.target.y; }); + node.append("text") + .attr("dx", -55) + .attr("dy", "-10") + .text(function(d) { + console.log(d); + return d.id; }); + topo.on("tick", function() { + link.attr("x1", function(d) { return d.source.x; }) + .attr("y1", function(d) { return d.source.y; }) + .attr("x2", function(d) { return d.target.x; }) + .attr("y2", function(d) { return d.target.y; }); - node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); - }); + node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); + }); - }); + }); } }; }); -- 2.36.6