JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<svg></svg>

CSS

.link {
  fill: none;
  stroke: #cecece
}

text {
  font-family: "Helvetica";
  font-size: 12px;
}

circle {
  fill: white;
  stroke: steelblue
}

rect {
  fill: white;
  stroke: steelblue;
  stroke-width: 3
}

/* tooltips */
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
}

/* Nrthward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}

.hi {
  width: 20px;
  height: 10px;
  background: green;
}

CoffeeScript

d3.viz = {}
d3.viz.tree = (A, O) ->
  that = this
  tree = d3.layout.tree().size([O.width, O.height])
  @diagonal = d3.svg.diagonal().projection (d) -> [A.x(d), A.y(d)]
  exports = (selection) ->
    selection.each (data) ->
    
      # Create data
      nodes = tree.nodes(data)
      nodes.forEach((d, i) -> d.id = i; d)
      links = tree.links(nodes)

      # Create links
      link = d3.select(this)
        .selectAll('.link').data(links)
        
      linkEnter = link.enter()
        .append("path")
        .attr("class", "link")
        .attr("d", that.diagonal)

      # Create nodes
      node = d3.select(this)
        .selectAll('.node')
        .data(nodes, (d) -> d.id)
        
      nodeEnter = node.enter()
        .append("g")
        
        
      node
        .attr("transform", (d) -> "translate(#{A.x d}, #{A.y d})")
        .attr("class", (d) -> "node #{d.type}")
      
      ww = 48; hh = 20
      # Append rectangles
      nodeEnter.append("rect")
        .attr("x", -ww/2)
        .attr("y", -hh/2)
        .attr("width", ww)
        .attr("height", hh)
        .attr("rx", 6)
        .attr("ry", 6)

      nodeEnter.append("text")
        .attr("x", 0)
        .attr("dy", "-1.52em")
        .attr("text-anchor", "middle")
        .text((d) -> d.name)
  exports
        
data = {"name":"Root","children":[{"name":"A","children":[{"name":"b","value":1},{"name":"c","value":1},{"name":"d","children":[{"name":"e","value":2},{"name":"f","value":6}]}]},{"name":"B","children":[{"name":"d","value":1}]}]}

O = {width: 600, height: 400}

A = 
  x: (d) -> d.x
  y: (d) -> d.y


O.margin = {top: 66, right: 39, bottom: 40, left: 60}
O.W = O.width + O.margin.left + O.margin.right
O.H = O.height + O.margin.top + O.margin.bottom

  

svg = d3.select("svg")
    .attr("width", O.W)
    .attr("height", O.H)
    .append("g")
    .attr("transform", "translate(" + O.margin.left + "," + O.margin.top + ")")
    


mytree = d3.viz.tree(A, O)

svg.datum(data).call(mytree)