CODEWITHSUNDEEP
d3.js
Sumant
Sumant

Reputation: 964

D3js Stacked Barchart width is not propper

i m trying to make a D3 bar chart, here bars are horizontal & it's width should be in percent. But i am having still some issue with its width. I have created a fiddle @ link. here you can see width is not proper, and same time its not align on y axis.

here its stacked with executed-placed-quantity. here executed is subset of placed, & placed is subset of quantity.

here barData m getting from Ajax call. in function getRanges i am preparing an array of bars, its returning me is 

[[bar1 start point, bar1Length],[bar2 start point, bar2Length],[bar3 start point, bar3Length]];

This data only m iterating inside forEach to create bars.

Some How its going in wrong direction. may be my scale is not proper or dataset. The final Output i have to come up is as enter image description here .

Now i need some help on atleast on bar alignment. can anyone help me?

Upvotes: 1

Views: 936

Answers (2)

Mark
Mark

Reputation: 108512

You are creating but not using your d3.scale.linear() scales to place your data. Your x and y variables are functions which map your data to pixel positions. For instance, your bar width is

 .attr("width", function (d, i) {
    return d[1] * 100; // what's the magic 100?
 })

This should be:

.attr("width", function(d, i) {
    return x(d[1]);
})

For placing values on the y axis you have:

.attr("transform", "translate(" + margin.l + "," + (margin.t + (30 * j)) + ")")

Using the y scale it's

.attr("transform", "translate(" + margin.l + "," + (y(j) + margin.t - 25/2) + ")") // this will center the bar on the tick

Also, for you y axis you might want to switch to ordinal scales as you example looks like discreet categories and not a numeric range.

Here's a few changes that'll get you going.

Upvotes: 1

huan feng
huan feng

Reputation: 8623

I think you need to draw a stackedBar chart in horizontal

http://tributary.io/inlet/4966973

Upvotes: 1

Related Questions