d3.container Experiments

by ramnathv

HTML

<div id="app"></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
  
extend = (defaults, options) ->
  extended = undefined
  prop = undefined
  extended = {}
  prop = undefined
  for prop of defaults
    `prop = prop`
    prop = prop
    if Object::hasOwnProperty.call(defaults, prop)
      extended[prop] = defaults[prop]
  for prop of options
    `prop = prop`
    prop = prop
    if Object::hasOwnProperty.call(options, prop)
      extended[prop] = options[prop]
  extended

d3.container = ->
  defaults =
    width: 960
    height: 600
    margin: {left: 20, right: 20, top: 20, bottom: 20}
  opts = extend(defaults, arguments[0])
  exports = (selection) ->
    selection.each (data) ->
      exports.container = d3.select(this).append('svg')
        .attr('width', opts.width)
        .attr('height', opts.height)
        .append('g')
        .attr('transform', 'translate(' + opts.margin.left + ',' + opts.margin.top + ')')
  exports.opts = opts
  createAccessors(exports)
  return exports
  
mysvg = d3.container().width(600).height(400)
d3.select("#app").call(mysvg)

console.log mysvg.container