Create a gist now

Instantly share code, notes, and snippets.

@savelee /.js
Created Jun 27, 2016

What would you like to do?
Ext JS 6.2 - custom D3: scenesetup: function(component, scene){ .. }
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment