Snippets

Adam Labadorf Stacking selections in D3 with coffeescript

You are viewing an old version of this snippet. View the current version.
Revised by Adam Labadorf f4127ab
example.coffee
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
%%d3coffeescriptmagic
svg = d3.select "body"
      .append "svg"
svg.attr "width", 300
   .attr "height", 300
bg = svg.append "rect"
bg.attr "width", 300
  .attr "height", 300
  .style "fill", "#eef"
g = svg.append "g"
g.attr "id", "parent"
 .attr "transform", "translate(30,30)"

t1 = g.append "text"
t1.style "dominant-baseline", "text-before-edge"
  .text "some text"

r1 = g.append "rect"
r1.attr "height", 32
  .attr "width", 200
  .style "fill", "red"
  .style "opacity", 0.75
            
t2 = g.append "text"
t2.attr "x", 0 
  .attr "y", 0
  .style "dominant-baseline", "text-before-edge"
  .text "some other text"

g.selectAll("*")
 .layout("vertical")
selection_layout.coffee
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
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"
            y = dy
            el_height = d3.select(this).node().getBBox().height
            dy += el_height
        if direction == "horizontal" or direction == "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
HTTPS SSH

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