score:1

Accepted answer

Your data isn't appropriate. It looks like you have two arrays, you need one array with each data-point:

this.data = [];
var iRowCount = oDataStore.rowCount;
for ( var iRow = 0; iRow < iRowCount; iRow++ )
{
  this.data.push( {label: oDataStore.getCellValue( iRow, 0 ), value: oDataStore.getCellValue( iRow, 1 ) } );
}

Then your domains become:

var x = d3.scaleLinear()
    .domain( [0, d3.max(this.data, function(d) { return d.value; } ])
    .range( [0, width] );

var y = d3.scaleBand()
    .domain(this.data.map(function(d) { return d.label; }))
    .rangeRound([height, 0])
    .padding(0.1);

Finally your bars become;

svg.selectAll( ".bar" )
  .data( this.data )
  .enter().append( "rect" )
  .attr("class", "bar")
  .attr("y", function(d) { return y(d.label); })
  .attr( "width", function(d) { return x(d.value); } )
  .attr( "height", y.bandwidth())
  .text( function( d ) { return d.label; } );

Related Query

More Query from same tag