d3graph 2.8.2__tar.gz → 2.9.0__tar.gz

{d3graph-2.8.2/d3graph.egg-info → d3graph-2.9.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.8.2
+Version: 2.9.0
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause

{d3graph-2.8.2 → d3graph-2.9.0}/d3graph/__init__.py

@@ -17,7 +17,7 @@ from d3graph.d3graph import (
 
 __author__ = 'Erdogan Tasksen'
 __email__ = 'erdogant@gmail.com'
-__version__ = '2.8.2'
+__version__ = '2.9.0'
 
 # Setup root logger
 _logger = logging.getLogger('d3graph')

{d3graph-2.8.2 → d3graph-2.9.0}/d3graph/d3graph.py

@@ -121,6 +121,8 @@ class d3graph:
              link_tension: float = None,
              sticky: bool = None,
              node_text_inside: bool = False,
+             max_ticks: int = 300,
+             label_zoom_threshold: float = 0.4,
              ) -> None:
         """Build and show the graph.
 
@@ -166,6 +168,15 @@ class d3graph:
             When False, nodes are released after dragging (default simulation behaviour).
             When None, the value set in __init__ is used.
             Right-click a fixed node to release it back into the simulation.
+        max_ticks : int, (default: 300)
+            Caps how many simulation ticks run before the force layout auto-stops, instead
+            of letting it cool down naturally (which can take thousands of ticks on large
+            graphs, each re-running collision detection over every node).
+            0 or None: disable the cap and run to natural cooldown.
+        label_zoom_threshold : float, (default: 0.6)
+            Node and edge labels are hidden below this zoom scale (unreadable anyway, and
+            costly to keep rendering for large graphs) and reappear once zoomed back in
+            past it. Uses a single CSS class toggle, not per-label work. 0: never hide.
 
         Returns
         -------
@@ -188,6 +199,8 @@ class d3graph:
         self.config['background_color'] = background_color
         self.config['dark_mode'] = dark_mode
         self.config['node_text_inside'] = node_text_inside
+        self.config['max_ticks'] = max_ticks
+        self.config['label_zoom_threshold'] = label_zoom_threshold
 
         # Allow show() to override the link_tension set at __init__ time
         if link_tension is not None:
@@ -801,6 +814,8 @@ class d3graph:
                    'collision': self.config['collision'],
                    'link_tension': self.config.get('link_tension', 1.0),
                    'sticky': self.config.get('sticky', False),
+                   'max_ticks': self.config.get('max_ticks', 300),
+                   'label_zoom_threshold': self.config.get('label_zoom_threshold', 0.6),
                    'node_text_inside': self.config.get('node_text_inside', False),
                    'CLICK_COMMENT': CLICK_COMMENT,
                    'CLICK_FILL': click_properties['fill'],

{d3graph-2.8.2 → d3graph-2.9.0}/d3graph/d3js/d3graphscript.js

@@ -10,6 +10,8 @@ function d3graphscript(config = {
     sticky: false,
     background_color: '#FFFFFF',
     node_text_inside: false,
+    max_ticks: 300,
+    label_zoom_threshold: 0.6,
     }) {
     
     //Constants for the SVG
@@ -17,6 +19,17 @@ function d3graphscript(config = {
     var height = config.height;
     var background_color = config.background_color || '#FFFFFF';
     var sticky = config.sticky || false;
+    // Cap how many simulation ticks run before auto-stopping, instead of
+    // letting a large graph's force layout cool down naturally over
+    // thousands of ticks (each one re-running collision detection over
+    // every node). Restarting the simulation (drag, slider changes) resets
+    // this counter so it still settles again after each change.
+    var maxTicks = (config.max_ticks !== undefined && config.max_ticks !== null) ? config.max_ticks : 300;
+    var tickCount = 0;
+    // Below this zoom scale, labels are unreadable anyway — hide them (via a
+    // single CSS class, not per-element work) instead of rendering thousands
+    // of illegible <text> nodes. They reappear once zoomed back in past it.
+    var labelZoomThreshold = (config.label_zoom_threshold !== undefined && config.label_zoom_threshold !== null) ? config.label_zoom_threshold : 0.6;
     
     // Set the body background color
     document.body.style.backgroundColor = background_color;
@@ -42,6 +55,7 @@ function d3graphscript(config = {
       d3.select(this).classed("dragging", true);
       if (sticky) {
         d.fixed = true;
+        tickCount = 0;
         force.start();
       }
     }
@@ -214,12 +228,26 @@ function d3graphscript(config = {
       .attr("width", width)
       .attr("height", height)
       .style("background-color", background_color)
-      .call(d3.behavior.zoom().on("zoom", function () { svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") }))
+      .call(d3.behavior.zoom().on("zoom", function () {
+        svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
+        // Single class toggle (cheap) rather than iterating every label on
+        // every zoom/pan event — CSS handles hiding all descendant <text>.
+        svg.classed("labels-hidden", d3.event.scale < labelZoomThreshold);
+      }))
       .on("dblclick.zoom", null)
       .append("g")
     
-    graphRec = JSON.parse(JSON.stringify(graph));
-    
+    graphRec = JSON.parse(JSON.stringify(graph));   // Full, unfiltered copy — used by the slider to restore edges later
+
+    // Apply the initial slider threshold BEFORE building any DOM elements.
+    // Without this, the browser would create a <line>/<title>/<text> for every
+    // single edge (e.g. 100,000+) and immediately delete most of them once the
+    // slider filter ran — doubling the work and freezing the page in the meantime.
+    (function applyInitialThreshold() {
+      var initialThresh = {{ SET_SLIDER }};
+      graph.links = graph.links.filter(function(d) { return d.edge_weight > initialThresh; });
+    })();
+
     //Creates the graph data structure out of the json data
     force.nodes(graph.nodes)
       .links(graph.links)
@@ -268,6 +296,7 @@ function d3graphscript(config = {
         d3.select(this).select(".node-shape")
           .style("stroke-dasharray", null)
           .style("stroke-width", function(d) { return d.node_size_edge; });
+        tickCount = 0;
         force.resume();
       });
     }
@@ -309,6 +338,14 @@ function d3graphscript(config = {
     
     //Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
     force.on("tick", function() {
+      // Auto-stop after maxTicks so a large graph doesn't keep re-running
+      // collision detection / layout math for thousands of frames while
+      // settling. maxTicks <= 0 disables the cap (run to natural cooldown).
+      if (maxTicks > 0 && ++tickCount > maxTicks) {
+        force.stop();
+        return;
+      }
+
       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; })
@@ -317,7 +354,9 @@ function d3graphscript(config = {
       // Position each shape according to its SVG element type:
       //   circle / ellipse  →  cx / cy attributes
       //   path              →  transform translate(x, y)
-      d3.selectAll(".node-shape").each(function(d) {
+      // Scoped to the bound `node` selection instead of re-querying the
+      // entire DOM every tick (was: d3.selectAll(".node-shape")).
+      node.select(".node-shape").each(function(d) {
         var el  = d3.select(this);
         var tag = this.tagName.toLowerCase();
         if (tag === 'circle' || tag === 'ellipse') {
@@ -327,7 +366,9 @@ function d3graphscript(config = {
         }
       });
 
-      d3.selectAll("text").attr("x", function(d) { return d.x; })
+      // Scoped to node labels only (was: d3.selectAll("text"), which also
+      // re-matched every link-text element on every tick).
+      node.select("text").attr("x", function(d) { return d.x; })
         .attr("y", function(d) { return d.y; })
       linkText.attr("x", function(d) { return (d.source.x + d.target.x) / 2; })  // ADD TEXT ON THE EDGES (PART 2/2)
         .attr("y", function(d) { return (d.source.y + d.target.y) / 2; })
@@ -534,6 +575,7 @@ function d3graphscript(config = {
 
     node = node.data(graph.nodes);
     node.enter().insert("circle", ".cursor").attr("class", "node").attr("r", 5).call(force.drag);
+    tickCount = 0;
     force.start();
   }
 

{d3graph-2.8.2 → d3graph-2.9.0}/d3graph/d3js/index.html.j2

@@ -130,6 +130,8 @@
                 sticky: {{ sticky | lower }},
                 background_color: '{{ background_color }}',
                 node_text_inside: {{ node_text_inside | lower }},
+                max_ticks: {{ max_ticks }},
+                label_zoom_threshold: {{ label_zoom_threshold }},
             })
         });
 

{d3graph-2.8.2 → d3graph-2.9.0}/d3graph/d3js/style.css

@@ -27,4 +27,12 @@ h3 {
 /* Shared pointer cursor for all node shapes */
 .node .node-shape {
   cursor: pointer;
+}
+
+/* Zoom-linked label visibility (performance): when zoomed far out, node and
+   edge labels are unreadable anyway, so they're hidden via this single class
+   toggle instead of being permanently removed. Placed after .node text so it
+   wins on specificity ties. */
+.labels-hidden text {
+  display: none;
 }

{d3graph-2.8.2 → d3graph-2.9.0}/d3graph/examples.py

@@ -1,3 +1,17 @@
+# %%
+from d3graph import d3graph, vec2adjmat, import_example
+import pandas as pd
+
+df = pd.read_csv('https://github.com/d3blocks/d3blocks/files/11995798/Df.csv', sep=',', index_col=False)
+del df['Unnamed: 0']
+df = df[0:5000]
+adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'])
+
+# sticky=False — classic spring-back behaviour
+d3 = d3graph()
+d3.graph(adjmat)
+d3.show()
+
 # %% SET PATH ISSUE https://github.com/erdogant/d3graph/issues/42
 from pathlib import Path
 from d3graph import d3graph, vec2adjmat, import_example

{d3graph-2.8.2 → d3graph-2.9.0/d3graph.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.8.2
+Version: 2.9.0
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause