trying to put back zoom animation. need to rework databinding to allow elements to be presented in different order than the data
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index a3d2b5b..d3a9e61 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -29,7 +29,7 @@
position: absolute;
bottom: 0px;
right: 0px;
- font-size: 8px;
+ font-size: 12px;
}
#status.top span {
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 54a35de..825b1a3 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -1,5 +1,10 @@
/*global d3*/
+d3.selection.prototype.moveToFront = function() {
+ return this.each(function(){
+ this.parentNode.appendChild(this);
+ });
+};
var colors = [
'color1',
@@ -118,6 +123,10 @@
rings[2].angles[i] = rings[1].angles[index];
});
+
+
+
+
return rings;
}
@@ -240,19 +249,21 @@
// do mouseover zoom on edge nodes
- // function zoom(data, index) {
- // var g = d3.select(document.getElementById(data.switches[index].dpid)).select('circle');
- // g.transition().duration(100).attr("r", rings[0].width*3);
- // }
+ function zoom(data, index) {
+ var g = d3.select(document.getElementById(data.switches[index].dpid)).select('circle');
+ g.transition().duration(100).attr("r", g.data()[0].width*3);
+ // TODO: this doesn't work because the data binding is by index
+// d3.select(this.parentNode).moveToFront();
+ }
- // svg.selectAll('.edge').on('mouseover', zoom);
- // svg.selectAll('.edge').on('mousedown', zoom);
+ svg.selectAll('.edge').on('mouseover', zoom);
+ svg.selectAll('.edge').on('mousedown', zoom);
- // function unzoom(data, index) {
- // var g = d3.select(document.getElementById(data.switches[index].dpid)).select('circle');
- // g.transition().duration(100).attr("r", rings[0].width);
- // }
- // svg.selectAll('.edge').on('mouseout', unzoom);
+ function unzoom(data, index) {
+ var g = d3.select(document.getElementById(data.switches[index].dpid)).select('circle');
+ g.transition().duration(100).attr("r", g.data()[0].width);
+ }
+ svg.selectAll('.edge').on('mouseout', unzoom);
// DRAW THE LINKS
@@ -352,7 +363,7 @@
updateModel(function (newModel) {
console.log('Update time: ' + (Date.now() - d)/1000 + 's');
- if (!oldModel || JSON.stringify(oldModel) != JSON.stringify(newModel)) {
+ if (true || !oldModel || JSON.stringify(oldModel) != JSON.stringify(newModel)) {
updateControllers(newModel);
updateTopology(svg, newModel);
} else {