Merge pull request projectmesa#767 from JamesHovet/fix-issue-765

Fix issue 765
pnrajiva · Apr 25, 2020 · ee6ed7f · ee6ed7f
2 parents 8858920 + 45e495d
commit ee6ed7f
Showing 1 changed file with 77 additions and 81 deletions.
diff --git a/mesa/visualization/templates/js/NetworkModule_d3.js b/mesa/visualization/templates/js/NetworkModule_d3.js
@@ -1,18 +1,19 @@
 var NetworkModule = function(svg_width, svg_height) {
 
     // Create the svg tag:
-    var svg_tag = "<svg width='" + svg_width + "' height='" + svg_height + "' " +
+    var svg_tag = "<svg id='NetworkModule_d3' width='" + svg_width + "' height='" + svg_height + "' " +
         "style='border:1px dotted'></svg>";
 
     // Append svg to #elements:
     $("#elements")
         .append($(svg_tag)[0]);
 
-    var svg = d3.select("svg"),
-        width = +svg.attr("width"),
-        height = +svg.attr("height"),
-        g = svg.append("g")
-        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+    var svg = d3.select("#NetworkModule_d3")
+    var width = +svg.attr("width")
+    var height = +svg.attr("height")
+    var g = svg.append("g")
+            .classed("network_root", true)
+            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
 
     var tooltip = d3.select("body").append("div")
         .attr("class", "tooltip")
@@ -23,88 +24,83 @@ var NetworkModule = function(svg_width, svg_height) {
             g.attr("transform", d3.event.transform);
         }));
 
+    var links = g.append("g")
+        .attr("class", "links")
+
+    var nodes = g.append("g")
+        .attr("class", "nodes")
+
     this.render = function(data) {
         var graph = JSON.parse(JSON.stringify(data));
 
-        var simulation = d3.forceSimulation(graph.nodes)
-            .force("charge", d3.forceManyBody()
-                .strength(-80)
-                .distanceMin(6))
-            .force("link", d3.forceLink(graph.edges))
-            .force("center", d3.forceCenter())
-            .stop();
-
-        var loading = svg.append("text")
-            .attr("dy", "0.35em")
-            .attr("text-anchor", "middle")
-            .attr("font-family", "sans-serif")
-            .attr("font-size", 10)
-            .text("Simulating. One moment please…");
-
-        // Use a timeout to allow the rest of the page to load first.
-        d3.timeout(function() {
-            loading.remove();
-
-            for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
-                simulation.tick();
-            }
-
-            var links = g.append("g")
-                .selectAll("line")
-                .data(graph.edges);
-            links.enter()
-                .append("line")
-                .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; })
-                .attr("stroke-width", function(d) { return d.width; })
-                .attr("stroke", function(d) { return d.color; });
-
-            links.exit()
+        simulation = d3.forceSimulation()
+        .nodes(graph.nodes)
+        .force("charge", d3.forceManyBody()
+            .strength(-80)
+            .distanceMin(2))
+        .force("link", d3.forceLink(graph.edges))
+        .force("center", d3.forceCenter())
+        .stop();
+
+        for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
+            simulation.tick();
+        }
+
+        links
+            .selectAll("line")
+            .data(graph.edges)
+            .enter()
+            .append("line")
+
+        links
+            .selectAll("line")
+            .data(graph.edges)
+            .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; })
+            .attr("stroke-width", function(d) { return d.width; })
+            .attr("stroke", function(d) { return d.color; });
+
+        links
+            .selectAll("line")
+            .data(graph.edges)
+            .exit()
                 .remove();
 
-            var nodes = g.append("g")
-                .selectAll("circle")
-                .data(graph.nodes);
-            nodes.enter()
-                .append("circle")
-                .attr("cx", function(d) { return d.x; })
-                .attr("cy", function(d) { return d.y; })
-                .attr("r", function(d) { return d.size; })
-                .attr("fill", function(d) { return d.color; })
-                .on("mouseover", function(d) {
-                    tooltip.transition()
-                        .duration(200)
-                        .style("opacity", .9);
-                    tooltip.html(d.tooltip)
-                        .style("left", (d3.event.pageX) + "px")
-                        .style("top", (d3.event.pageY) + "px");
-                })
-                .on("mouseout", function() {
-                    tooltip.transition()
-                        .duration(500)
-                        .style("opacity", 0);
-                });
-
-            nodes.exit()
+        nodes
+            .selectAll("circle")
+            .data(graph.nodes)
+            .enter()
+            .append("circle")
+            .on("mouseover", function(d) {
+                tooltip.transition()
+                    .duration(200)
+                    .style("opacity", .9);
+                tooltip.html(d.tooltip)
+                    .style("left", (d3.event.pageX) + "px")
+                    .style("top", (d3.event.pageY) + "px");
+            })
+            .on("mouseout", function() {
+                tooltip.transition()
+                    .duration(500)
+                    .style("opacity", 0);
+            });
+
+        nodes.selectAll("circle")
+            .data(graph.nodes)
+            .attr("cx", function(d) {return d.x; })
+            .attr("cy", function(d) { return d.y; })
+            .attr("r", function(d) { return d.size; })
+            .attr("fill", function(d) { return d.color; })
+
+        nodes.selectAll("circle")
+            .data(graph.nodes)
+            .exit()
                 .remove();
-        });
     };
 
     this.reset = function() {
-        reset();
-    };
 
-    function reset() {
-        svg.selectAll("g")
-            .remove();
-        g = svg.append("g")
-            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
-
-        svg.call(d3.zoom()
-            .on("zoom", function() {
-                g.attr("transform", d3.event.transform);
-            }));
-    }
-};
+    };
+};