fix typo: index.html. Add scaling on mouseover for nodes

esnet · Aug 10, 2022 · 1b9fd96 · 1b9fd96
1 parent 46fcc66
commit 1b9fd96
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -180,7 +180,7 @@
         }
         document.getElementById("mapContainer").append(canvas);
 
-        dataElem.value = JSON.stringify(mapData);
+        dataElem.value = JSON.stringify(topology);
         dataElem.style = "height: 300px; width: 300px;";
         dataElem.onChange = function(event){
             canvas.topology = JSON.parse(event.target.value);

diff --git a/src/components/lib/esmap.js b/src/components/lib/esmap.js
@@ -457,20 +457,24 @@ function renderNodes(g, data, ref, layerId) {
   feature
     .enter()
     .append('g')
+    .attr('class', 'node')
+    .attr('stroke-width', 0.25)
+    .attr('stroke', "black")
+    .append('g')
+    .attr('class', 'scale-container')
+    .attr('transform', "scale(1.0, 1.0)")
     .html(function(d){
       var circle = `<circle r='${ref.options["nodeWidthL"+layerId]}' />`
       return d.meta.svg || circle;
     })
-    .attr('class', 'node')
     .attr('text', function (d) {
       return d.name;
     })
     .attr('fill', function (d) {
       return d.color;
     })
-    .attr('stroke-width', 0.25)
-    .attr('stroke', "black")
     .on('mouseover', function (event, d) {
+      d3.select(event.target.parentElement).attr("transform", "scale(1.5, 1.5)")
       if(d.meta.template){
         var text = renderTemplate(d.meta.template, {"d": d, "self": d });
       } else {
@@ -481,7 +485,8 @@ function renderNodes(g, data, ref, layerId) {
 
       PubSub.publish("showTooltip", text, ref.svg.node());
     })
-    .on('mouseout', function (d) {
+    .on('mouseout', function (event, d) {
+      d3.select(event.target.parentElement).attr("transform", "scale(1.0, 1.0)")
       PubSub.publish("hideTooltip", null, ref.svg.node());
     })
     .select(function(d){