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; } );
Source: stackoverflow.com
Related Query
- IBM Cognos Analytics with D3.js Bar Chart height problem
- D3 Bar Chart with Variable X and Y(variable width and height for bars)
- Issue with Bar Height on D3 Grouped Chart Implementation
- Bar chart with negative values
- How to update d3.js bar chart with new data
- Make simple bar chart using C3 with separate columns on the x axis
- d3 bar chart with range selector in x-axis (like dygraphs)
- d3.js bar chart sorting: can't figure out how to sort x-axis labels along with bars
- Adding Error Bars to Grouped Bar Chart with D3.js
- How to use x and width in a bar chart with scaleTime?
- C3 / D3 bar chart with horizontal scroll
- DC.js bar chart with date axis
- d3.js stacked bar chart with positive and negative values
- Need help lining up x axis ticks with bars in D3.js bar chart
- How to Make a bar chart with rounded corners with extended grid in d3.js?
- dc.js bar chart with ordinal x axis scale doesn't render correctly
- Sorting the bars in a bar chart with dc.js
- Align x-axis with zero scale d3 bar chart
- NVD3.js: Stacked and grouped bar chart with two y-axis
- D3 Gradient Fill on Bar Chart - with colour scale
- D3 bar chart background with dots
- bar height issue in bar chart of d3 js
- d3 show labels only for ticks with data in a bar chart
- D3 - How to loop through an object with keys for a bar chart
- d3.js Stacked bar chart with Logarithmic Scaling
- Grouped bar chart with zoom and updateable data error
- Specifying Ticks on D3 Bar chart with Time Series data and scaleBand
- Bar Chart With View Finder d3.js
- d3 change bar chart color according to height
- Trying to use D3 with React to create a bar chart
More Query from same tag
- d3.js v5 : Unable to get data points to show on map of US
- Issues creating a D3 tooltip for line graph
- Differentiating between bars in tooltip for stacked bar chart
- Download C3 chart as pdf as given download option in D3 graphs
- Scale D3 Hexbin map example to fit div
- How do I give certain edges a class?
- d3-sankey-diagram align links by type
- Structuring Plain Text to JSON
- On button click open a new window and draw multiple large circles with D3
- How does D3JS send data into events
- Applying colors via mousedown can only be overwritten if I choose a color with an index value greater than the current color index
- D3 timeScale path get proper click location
- Which format to choose for storing and displaying data in D3.js dynamically?
- Can not break long sentence in a D3-generated SVG text
- How can one scale GIS data in d3.js?
- d3 zoom behaviour is overwriten by mousemove event
- How to get data of parent node in d3.js
- Pass the current parameter to function in a loop
- D3 nodes overlapping
- Hide all but selected connected nodes in D3 (v4) force graph
- How to get the vertically-oriented tree using d3.js with rectangular box
- d3 issue: .data() is not recognizable
- Adding icons to bar charts made using c3js
- adding onClick event to show a hidden div above each bar in D3.js (maybe I'm missing important css code also?)
- Hierarchy Level labels for d3.partition icicle chart
- grouped category bar chart with different groups in d3?
- dot chart showing triangle in d3 Java script
- d3 - dougnut bubble pie chart
- d3 setting minimum height for stacked bar chart
- style transitions don't seem to work when called from a setInterval function (D3.js)