CODEWITHSUNDEEP
d3.js
Tim
Tim

Reputation: 3806

Issue with Bar Height on D3 Grouped Chart Implementation

I'm trying to make a d3 grouped bar chart. Here is what i have so far: http://jsbin.com/sobuv/2/

The problem I am currently stuck on is how the heights of my bars is not matching the values in the y axis. For example in the first set "Jan" the values are 33.98, 40.1, 60.1 but I only set the height.

What am i doing wrong here - probably i guess around these lines?

.transition()
   .duration(500)
     .attr("y", parseInt(h, 10) - value)
     .attr("height", value);

I'd appreciate a hand here i'm sure its something simple which is eluding me. Thanks!

Upvotes: 0

Views: 102

Answers (1)

AmeliaBR
AmeliaBR

Reputation: 27544

(Recap from the comments)

If you're used to using statistical or spreadsheet graphing programs, you may expect that your graphics will be drawn according to the scales created when you declared the max and min values for your axes. That's not how it works with d3. Every element is drawn separately as an SVG graphical object, and if you give it size or position values those will be interpretted as pixel values (or transformed SVG coordinates if you've used any graphical transformations).

D3 scales are used to manage the relationship between data values and on-screen pixels. You set the domain of the scale according to your data values, and the range of the scale according to the pixel values you want to use for that data. For linear (numerical) scales, the domain and range are defined as two-element arrays -- the first value in the range will be the pixel value for data equal to the first value in the domain, the second value in the range will be the pixel value for the second value in the domain, and every other value will be calculated in proportion to those.

But simply creating the scale isn't enough. The scale object is a function -- you pass in a value as a parameter, and it returns the pixel value that you should use to set width, height, x and y positions for your SVG elements.

Good introductions to d3:

Upvotes: 1

Related Questions