Ext JS 6.2 - custom D3: scenesetup: function(component, scene){ .. }

.js

var store = Ext.getStore('Artists');
var max = store.getCount();
var i = 0, data = [], artists = [];

//I need two arrays, one with artist names, and one with playcounts. In my first try, I hardcoded it. Afterwards, I switched to a real store.

for(i; i<max; i++){
artists.push(store.getAt(i).get('name'));
      data.push(store.getAt(i).get('playcount'));
}

//set the scales
var x = d3.scale.linear()
.domain([0, d3.max(data)])
      .range([0, component.getHeight()]);

//set the component size to the max size of the SVG to enable scrolling
component.setHeight((i * 30)+10); //item number * bar height + some extra margin.

//set the scene
scene.append('g')
.attr('transform', 'translate(10,10)') //start position
      .selectAll("rect") //we will create rectangles
      .data(data) //based on this data
      .enter() //enter the scene to start drawing
      .append("rect") //the rectangles will start on this position:
      .attr({'x':0,'y':function(data,i){ return i * 30 }}) //item number * bar height, plus some extra margin
       .attr('height',25) //this will set the bar height
       .attr('width',function(data){ return data; }) //the bar width is dynamic and based on the data values
       .style('fill', '#639000'); //bars in this color

//a rectangle can't contain text, we will create a new layer
scene.append('g')
.attr('transform', 'translate(10,10)') //start position
      .selectAll("text") //select text
      .data(data) //for every item in data
      .enter() //enter the scene to start drawing
      .append("text") //create text at this position:
      .attr({'x':function(data, i) {
      	return 10 //left position text
      },'y':function(data,i){
            return (i*30) + 18 } //this position is almost the same as the positioning as bars, this time we include some more white space to align the text.
       })
      .text(function(data, i){
        //we will print the artist name and the count, based on the item index number
        	return artists[i] + ": " + data;
       }).style({'fill':'#ffffff','font-size':'14px'}); //with this styling