Snippets

Adam Labadorf Stacking selections in D3 with coffeescript

Updated by Adam Labadorf
View revision

File selection_layout.coffee Modified

  • Ignore whitespace
  • Hide word diff 
-d3.selection::layout = (direction) ->
+d3.selection::layout = (direction,hpad=0,vpad=0) ->
     dx = 0
     dy = 0
     this.each ->
         if direction in ["vertical","both"]
             y = dy
             el_height = d3.select(this).node().getBBox().height
-            dy += el_height
+            dy += el_height+vpad
         if direction in ["horizontal","both"]
             x = dx
             el_width = d3.select(this).node().getBBox().width
-            dx += el_width
-        el.attr "transform", "translate(#{x} #{y})"
+            dx += el_width+hpad
+        el.attr "transform", "translate(#{x},#{y})"
Updated by Adam Labadorf
View revision

File selection_layout.coffee Modified

  • Ignore whitespace
  • Hide word diff 
     dy = 0
     this.each ->
         el = d3.select this
-        x = el.attr("x") ? 0
-        y = el.attr("y") ? 0
+        transf = d3.transform(el.attr "transform")
+        x = transf.translate.x ? 0
+        y = transf.translate.y ? 0
         if direction in ["vertical","both"]
             y = dy
             el_height = d3.select(this).node().getBBox().height
             x = dx
             el_width = d3.select(this).node().getBBox().width
             dx += el_width
-        el.attr "transform", "translate(#{x} #{y})"
+        el.attr "transform", "translate(#{x} #{y})"
Updated by Adam Labadorf
View revision

File example.coffee Modified

  • Ignore whitespace
  • Hide word diff 
-%%d3coffeescriptmagic
 svg = d3.select "body"
       .append "svg"
 svg.attr "width", 300
Updated by Adam Labadorf
View revision

File selection_layout.coffee Modified

  • Ignore whitespace
  • Hide word diff 
-layout = (direction) ->
-    dx = 0 
-    dy = 0 
-    this.each( ->
+d3.selection::layout = (direction) ->
+    dx = 0
+    dy = 0
+    this.each ->
         el = d3.select this
-        x = if el.attr "x" is null then 0 else el.attr "x" 
-        y = if el.attr "y" is null then 0 else el.attr "y" 
-        if direction == "vertical" or direction == "both"
+        x = el.attr("x") ? 0
+        y = el.attr("y") ? 0
+        if direction in ["vertical","both"]
             y = dy
             el_height = d3.select(this).node().getBBox().height
             dy += el_height
-        if direction == "horizontal" or direction == "both"
+        if direction in ["horizontal","both"]
             x = dx
             el_width = d3.select(this).node().getBBox().width
             dx += el_width
-        el.attr "transform", "translate("+x+" "+y+")"
-    )             
-d3.selection.prototype.layout = layout
+        el.attr "transform", "translate(#{x} #{y})"
Updated by Adam Labadorf
View revision

File selection_layout.coffee Modified

  • Ignore whitespace
  • Hide word diff 
 layout = (direction) ->
-    dx = 0
-    dy = 0
-    this.each( -> 
+    dx = 0 
+    dy = 0 
+    this.each( ->
         el = d3.select this
+        x = if el.attr "x" is null then 0 else el.attr "x" 
+        y = if el.attr "y" is null then 0 else el.attr "y" 
         if direction == "vertical" or direction == "both"
-            el.attr "y", -> 
-                dy_orig = dy
-                el_height = d3.select(this).node().getBBox().height
-                dy += el_height
-                dy_orig
+            y = dy
+            el_height = d3.select(this).node().getBBox().height
+            dy += el_height
         if direction == "horizontal" or direction == "both"
-            el.attr "x", ->
-                dx_orig = dx
-                el_width = d3.select(this).node().getBBox().width
-                dx += el_width
-                dx_orig
-    )
-    
+            x = dx
+            el_width = d3.select(this).node().getBBox().width
+            dx += el_width
+        el.attr "transform", "translate("+x+" "+y+")"
+    )             
 d3.selection.prototype.layout = layout
  2. 1
  3. 2
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.