JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<div id="chart"></div>

CoffeeScript

createAccessors = (visExport) ->
  for n of visExport.opts
    continue  unless visExport.opts.hasOwnProperty(n)
    visExport[n] = ((n) ->
      (v) ->
        (if arguments.length then (visExport.opts[n] = v
        this
        ) else visExport.opts[n])
    )(n)
  return

d3.container = {}
d3.container.svg = ->
  opts = 
      width: 300
      height: 200
      margin: {left: 20, right: 20, top: 20, bottom: 20}
  exports = (selection) ->
    selection.each (data) ->
      W = opts.width + opts.margin.left + opts.margin.right
      H = opts.height + opts.margin.top + opts.margin.bottom
      sel = d3.select(this)
      svg = sel.selectAll("svg").data(data)
      svg.enter().append("svg")
      container = sel.selectAll("svg")
        .attr("width", W)
        .attr("height", H)  
      container.append("g")
        .attr("transform", "translate(#{opts.margin.left}, #{opts.margin.top})")
  exports.opts = opts; createAccessors(exports)
  exports
 

svgs = d3.select("#chart")
  .datum([1, 2])
  .call(d3.container.svg())

console.log svgs.attr("transform")   
d3.select("#chart").selectAll("g").append("circle")
  .attr({cx: 20, cy: 20, r: 5})