     @getRootElement()
       .select('.margin-convention-element')
       .append('g')
-      .attr('class', 'scale scale-y')
+      .classed(scale: true, 'scale-y': true)
       .call(D3Bar.yAxis(yScale))
 
   renderBars: (data, x0Scale) =>
     @getRootElement()
       .select('.margin-convention-element')
       .append('g')
-      .attr('class', 'bar-chart')
+      .classed('bar-chart', true)
       .selectAll('.bars-group')
       .data(data)
       .enter()
       .append('g')
-      .attr('class', 'bars-group')
+      .classed('bars-group', true)
       .attr('transform', (d) -> "translate(#{x0Scale(d.key)},0)")
 
   renderBar: (chartHeight, x1Scale, yScale) =>

    @getRootElement()
      .select('.margin-convention-element')
      .append('g')
      .attr('class', 'scale scale-x')
      .attr('transform', "translate(0,#{chartHeight})")
      .call(D3Bar.xAxis(x0Scale))


      .data((d, i) -> d.values)
      .enter()
      .append('g')
      .classed('bar-group', true)
      .append('rect')
      .classed('bar', true)
      .attr('x', (d, i) -> x1Scale(i))
      .attr('width', D3Bar.adjustRangeBand(x1Scale.rangeBand()))
      .attr('y', (d, i) -> yScale(d.value))
