Mithril with D3 and Transition

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<div class="container-fluid" id='main'>
    <div class="row">
        <div class="col-xs-12 col-md-6" id='app'>
        </div>
    </div>
</div>

CSS

#main{
  margin-top: 30px;
}

CoffeeScript

d3.selection.prototype.dataAppend = (data, name) ->
  el = @selectAll(name).data(data)
  el.enter_ = el.enter().append(name)
  el
    
d3Bar = ->
  exports = (selection) ->
    selection.each (data) ->
      S = 
        x: d3.scale.ordinal().rangeRoundBands([0, 300])
        y: d3.scale.linear().range([200, 0])
      A = 
        x: (d) -> d.x
        y: (d) -> d.y
      S.x.domain data.map(A.x)
      S.y.domain [0, 50]
      bar = d3.select(@)
        .selectAll("rect")
        .data(data)
      bar.enter().append("rect")
        .attr
          y: S.y(0)
          height: 0
          fill: "steelblue"
          stroke: "white"
            
      bar.attr
          x: (d) -> S.x A.x(d)
          width: S.x.rangeBand()
       .transition().attr
          y: (d) -> S.y A.y(d)
          height: (d) -> S.y(0) - S.y A.y(d)
            
      bar.exit().remove()
            
            
data = [
  {x: "A", y: 10}
  {x: "B", y: 20},
  {x: "C", y: 30},
  {x: "D", y: 40}
]


Chart = 
  controller: (args) ->
    draw: -> (el, isinit, context) ->
     d3.select(el)
      .datum(args.data)
      .call(d3Bar())
  view: (ctrl, args) ->
    m "svg", {width: 340, height: 240},
      m 'g', {
        transform: "translate(20, 20)"
        config: ctrl.draw()
      }


kPanel =
  view: (ctrl, args) ->
    m '.chart-wrapper',
      m '.chart-title', args.title
      m '.chart-stage', args.stage
      m '.chart-notes', args.notes
 

Button = 
  view: (c, args) -> 
    m 'div.btn-group[role="group"]', [
      m 'button.btn.btn-sm.btn-success', {
        onclick: (e) ->
          args.data().push(
            {x: Math.random(), y: Math.random()*40}
           )
          }, "Add"
      m 'button.btn.btn-sm.btn-danger', {
        onclick: (e) ->
          args.data().splice(0, 1)
        }, "Remove"
     ]



App = 
  controller: (args) ->
    data: m.prop(data)
  view: (c, args) ->
    m.component(kPanel, {
      title: 'Mithril with D3'
      stage: m.component(Chart, {data:...