New Twiddle

components.d3-graph-test.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
	data: [55, 44, 30, 23, 17, 14, 16, 25, 41, 61, 85,
            101, 95, 105, 114, 150, 180, 210, 125, 100, 71,
            75, 72, 67],
  barWidth: 20,
  barPadding: 3,
  graphWidth: Ember.computed('data', 'barWidth', 
                             'barPadding', () => {
    	let data = this.get('data'),
          barWidth = this.get('barWidth'),
          barPadding = this.get('barPaading');
    	return data.length * (barWidth + barPadding) - barPadding;
  }),
	margin: {
    top: 10,
    right: 10, 
    bottom: 10,
    left: 50
  },
  totalWidth: Ember.computed('graphWidth', 'margin', () => {
    let graphWidth = this.get('graphWidth'),
        margin = this.get('margin');
    return graphWidth + margin.left + margin.right;
  }),
  totalHeight: Ember.computed('maxValue', 'margin', () => {
    let maxValue = this.get('maxValue'),
        margin = this.get('margin');
    return maxValue + margin.top + margin.bottom;
  })
});

templates.application.hbs

<br>
<br>
{{d3-graph (pipe
    (d3-attr "id" "graph")
    (d3-attr "width" 500)
    (d3-attr "height" 500)
    (d3-append "text")
    (d3-attr "x" 10)
    (d3-attr "y" 10)
    (d3-text (compute (d3-format ".0%") 0.123))
    (d3-style "font" "10px sans-serif")
    (d3-attr "fill" "black")
	)
  tagName="svg"
}}
<br>
<br>

templates.components.d3-graph-test.hbs

{{yield}}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-d3-helpers": "0.5.16",
    "ember-composable-helpers": "2.1.0"
  }
}